@adstage/web-sdk 2.5.3 → 2.6.1

package/src/modules/ads/renderers/native-ad-renderer.ts

@@ -0,0 +1,154 @@
+/**
+ * 네이티브 광고 전용 렌더러
+ */
+
+import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { BaseAdRenderer } from './base-ad-renderer';
+
+export class NativeAdRenderer extends BaseAdRenderer {
+  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
+    super(AdType.NATIVE, debug, advertisementEventTracker);
+  }
+
+  /**
+   * 네이티브 광고 기본 높이
+   */
+  getDefaultHeight(): string {
+    return '200px';
+  }
+
+  /**
+   * 단일 네이티브 광고 렌더링
+   */
+  async renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) return;
+
+    const adElement = document.createElement('div');
+    adElement.className = 'adstage-ad adstage-native-ad';
+    adElement.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    `;
+
+    // 제목
+    if (advertisement.title) {
+      const title = document.createElement('h3');
+      title.textContent = advertisement.title;
+      title.style.cssText = `
+        margin: 0 0 8px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #111827;
+        line-height: 1.3;
+      `;
+      adElement.appendChild(title);
+    }
+
+    // 설명
+    if (advertisement.textContent) {
+      const description = document.createElement('p');
+      description.textContent = advertisement.textContent;
+      description.style.cssText = `
+        margin: 0 0 12px 0;
+        font-size: 14px;
+        color: #6b7280;
+        line-height: 1.4;
+        flex: 1;
+      `;
+      adElement.appendChild(description);
+    }
+
+    // 이미지 (있는 경우)
+    if (advertisement.imageUrl) {
+      const imageContainer = document.createElement('div');
+      imageContainer.style.cssText = `
+        width: 100%;
+        height: 120px;
+        margin-bottom: 12px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #f3f4f6;
+      `;
+      
+      const img = document.createElement('img');
+      img.src = advertisement.imageUrl;
+      img.alt = advertisement.title || 'Native Advertisement';
+      img.style.cssText = `
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      `;
+      
+      imageContainer.appendChild(img);
+      adElement.appendChild(imageContainer);
+    }
+
+    // CTA 버튼 (링크가 있는 경우)
+    if (advertisement.linkUrl) {
+      const ctaButton = document.createElement('button');
+      ctaButton.textContent = 'Learn More';
+      ctaButton.style.cssText = `
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        align-self: flex-start;
+        transition: background-color 0.2s;
+      `;
+      
+      ctaButton.addEventListener('click', () => {
+        if (this.advertisementEventTracker) {
+          console.log(`Native click tracked for ad: ${advertisement._id}`);
+        }
+        window.open(advertisement.linkUrl!, '_blank');
+      });
+      
+      ctaButton.addEventListener('mouseenter', () => {
+        ctaButton.style.backgroundColor = '#2563eb';
+      });
+      
+      ctaButton.addEventListener('mouseleave', () => {
+        ctaButton.style.backgroundColor = '#3b82f6';
+      });
+      
+      adElement.appendChild(ctaButton);
+    }
+
+    container.innerHTML = '';
+    container.appendChild(adElement);
+
+    if (this.debug) {
+      console.log(`🏠 Single native ad rendered: ${advertisement._id}`);
+    }
+  }
+
+  /**
+   * 다중 네이티브 광고 렌더링 - 현재는 단일 렌더링만 지원
+   */
+  async renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
+    if (advertisements.length > 0) {
+      await this.renderAdElement(slot, advertisements[0]);
+      
+      if (this.debug) {
+        console.log(`🏠 Native ad rendered (first of ${advertisements.length}): ${slot.id}`);
+      }
+    } else {
+      if (this.debug) {
+        console.warn(`⚠️ No native advertisements available for slot: ${slot.id}`);
+      }
+    }
+  }
+}

package/src/modules/ads/renderers/text-ad-renderer.ts

@@ -0,0 +1,120 @@
+/**
+ * 텍스트 광고 전용 렌더러
+ */
+
+import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { TextTransitionManager } from '../../../managers/ads/text-transition-manager';
+import { BaseAdRenderer } from './base-ad-renderer';
+import { TextAdUtils } from '../../../utils/text-ad-utils';
+import { AdClickHandler } from '../../../utils/ad-click-handler';
+
+export class TextAdRenderer extends BaseAdRenderer {
+  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
+    super(AdType.TEXT, debug, advertisementEventTracker);
+  }
+
+  /**
+   * 텍스트 광고 기본 높이
+   */
+  getDefaultHeight(): string {
+    return '60px';
+  }
+
+  /**
+   * 단일 텍스트 광고 렌더링
+   */
+  async renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) return;
+
+    const adElement = document.createElement('div');
+    adElement.className = 'adstage-ad adstage-text-ad';
+
+    const optimizedHeight = (slot as any).optimizedHeight;
+    const containerElement = container.parentElement || container;
+
+    if (optimizedHeight) {
+      adElement.style.width = '100%';
+      adElement.style.height = String(optimizedHeight);
+    } else {
+      const config = slot.config as any;
+      const options = {
+        width: config?.width,
+        height: config?.height
+      };
+      const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+      adElement.style.width = width;
+      adElement.style.height = height;
+    }
+
+    // 텍스트 콘텐츠 렌더링
+    const textDiv = document.createElement('div');
+    textDiv.className = 'adstage-text-content';
+    textDiv.style.cssText = TextAdUtils.createTextAdStyles(false);
+    
+    TextAdUtils.setTextAdContent(textDiv, advertisement);    // 최대 라인 수 제한
+    const maxLines = (slot.config as any)?.maxLines;
+    if (maxLines && typeof maxLines === 'number') {
+      textDiv.style.display = '-webkit-box';
+      textDiv.style.webkitLineClamp = String(maxLines);
+      textDiv.style.webkitBoxOrient = 'vertical';
+      textDiv.style.overflow = 'hidden';
+    }
+
+    adElement.appendChild(textDiv);
+
+    // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+    AdClickHandler.addClickEventForRenderer(
+      adElement,
+      advertisement,
+      slot,
+      () => this.createEventTrackingCallback(),
+      this.debug,
+      'Text'
+    );
+
+    container.innerHTML = '';
+    container.appendChild(adElement);
+
+    if (this.debug) {
+      console.log(`✨ Single text ad rendered: ${advertisement._id}`);
+    }
+  }
+
+  /**
+   * 다중 텍스트 광고 렌더링 (전환 효과)
+   */
+  async renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) {
+      throw new Error(`Container not found: ${slot.containerId}`);
+    }
+
+    const trackEventCallback = this.createEventTrackingCallback();
+    
+    const optimizedSliderOptions = {
+      autoSlideInterval: ((slot.config as any)?.slideInterval || 5000) / 1000,
+      ...slot.config,
+      optimizedHeight: (slot as any).optimizedHeight,
+      aspectRatio: (slot as any).aspectRatio
+    };
+
+    const sliderElement = TextTransitionManager.createTextTransitionContainer(
+      slot,
+      advertisements,
+      optimizedSliderOptions,
+      trackEventCallback,
+      this.debug
+    );
+
+    if (sliderElement) {
+      container.innerHTML = '';
+      container.appendChild(sliderElement);
+      
+      if (this.debug) {
+        console.log(`✨ Text transition created for slot: ${slot.id} with ${advertisements.length} ads`);
+      }
+    }
+  }
+}

package/src/modules/ads/renderers/video-ad-renderer.ts

@@ -0,0 +1,433 @@
+/**
+ * 비디오 광고 전용 렌더러
+ */
+
+import { AdSlot, Advertisement, AdType, AdEventType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { BaseAdRenderer } from './base-ad-renderer';
+import { AdClickHandler } from '../../../utils/ad-click-handler';
+
+export class VideoAdRenderer extends BaseAdRenderer {
+  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
+    super(AdType.VIDEO, debug, advertisementEventTracker);
+  }
+
+  /**
+   * 비디오 광고 기본 높이 (16:9 비율 고려)
+   */
+  getDefaultHeight(): string {
+    return '360px';
+  }
+
+  /**
+   * 단일 비디오 광고 렌더링
+   */
+  async renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) return;
+
+    // 비디오 전용 컨테이너 생성
+    const videoContainer = document.createElement('div');
+    videoContainer.className = 'adstage-video-container';
+    videoContainer.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000;
+      border-radius: 8px;
+      overflow: hidden;
+    `;
+
+    // 비디오 요소 렌더링
+    this.renderVideoElementDirect(videoContainer, advertisement, slot);
+
+    container.innerHTML = '';
+    container.appendChild(videoContainer);
+
+    if (this.debug) {
+      console.log(`🎬 Single video ad rendered: ${advertisement._id}`);
+    }
+  }
+
+  /**
+   * 다중 비디오 광고 렌더링 - 비디오는 단일 렌더링만 지원
+   */
+  async renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) {
+      throw new Error(`Container not found: ${slot.containerId}`);
+    }
+
+    if (advertisements.length > 0) {
+      const videoAd = advertisements[0]; // 첫 번째 비디오만 사용
+      
+      // 비디오 전용 컨테이너 생성
+      const videoContainer = document.createElement('div');
+      videoContainer.className = 'adstage-video-container';
+      videoContainer.style.cssText = `
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #000;
+        border-radius: 8px;
+        overflow: hidden;
+      `;
+      
+      // 비디오 요소 렌더링
+      this.renderVideoElementDirect(videoContainer, videoAd, slot);
+      
+      // 컨테이너에 추가
+      container.innerHTML = '';
+      container.appendChild(videoContainer);
+      
+      // VIEWABLE 이벤트 추적
+      const trackEventCallback = this.createEventTrackingCallback();
+      setTimeout(() => {
+        trackEventCallback(videoAd._id, slot.id, AdEventType.VIEWABLE);
+      }, 100);
+      
+      if (this.debug) {
+        console.log(`🎬 Single video rendered for VIDEO slot: ${slot.id} (${videoAd._id})`);
+      }
+    } else {
+      if (this.debug) {
+        console.warn(`⚠️ No video advertisements available for slot: ${slot.id}`);
+      }
+    }
+  }
+
+  /**
+   * 비디오 요소 직접 렌더링
+   */
+  private renderVideoElementDirect(container: HTMLElement, advertisement: Advertisement, slot: AdSlot): void {
+    // 비디오 컨테이너를 relative로 설정
+    container.style.position = 'relative';
+    
+    const video = document.createElement('video');
+    
+    // 비디오 기본 설정
+    video.style.width = '100%';
+    video.style.height = '100%';
+    video.style.objectFit = 'contain';
+    video.preload = 'metadata';
+    
+    // 슬롯 설정에서 비디오 옵션들 확인 (기본값 적용)
+    const config = slot.config as any;
+    
+    // 디버깅: config 내용 확인
+    if (this.debug) {
+      console.log('🎬 Video config received:', config);
+    }
+    
+    // 기본 설정: 모든 컨트롤 숨김 (사용자 요구사항 - config에 상관없이 기본값 적용)
+    video.controls = false;
+    
+    // 기본 설정: 자동 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+    video.autoplay = config?.autoplay === false ? false : true;
+    
+    // 기본 설정: 음소거 true (기본값 강제 적용)
+    video.muted = true;
+    
+    // 기본 설정: 반복 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+    video.loop = config?.loop === false ? false : true;
+    
+    // 디버깅: 최종 비디오 설정 확인
+    if (this.debug) {
+      console.log('🎬 Final video settings:', {
+        autoplay: video.autoplay,
+        muted: video.muted,
+        loop: video.loop,
+        controls: video.controls
+      });
+    }
+    
+    // playsinline 설정 (모바일에서 전체화면 방지)
+    if (config?.playsinline !== false) {
+      video.setAttribute('playsinline', '');
+    }
+    
+    // 사용자가 명시적으로 controls=true를 설정한 경우에만 오버라이드 (첫 번째 비디오는 기본값 유지)
+    if (config?.controls === true) {
+      video.controls = true;
+      if (this.debug) {
+        console.log('🎬 User explicitly enabled controls, overriding default');
+      }
+    }
+    
+    // 특별한 컨트롤 설정 처리
+    if (config?.hideControls) {
+      // 완전히 모든 컨트롤 숨김 (pointer-events까지 차단)
+      video.controls = false;
+      video.style.cssText += `
+        pointer-events: none;
+      `;
+    } else if (config?.customControls) {
+      // controls가 true일 때만 특정 컨트롤 숨기기 (CSS로 처리)
+      if (video.controls) {
+        const customControlsStyle = document.createElement('style');
+        customControlsStyle.textContent = `
+          video::-webkit-media-controls-play-button {
+            display: ${config.customControls.hidePlayButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-timeline {
+            display: ${config.customControls.hideProgressBar ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-current-time-display {
+            display: ${config.customControls.hideCurrentTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-time-remaining-display {
+            display: ${config.customControls.hideRemainingTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-volume-slider {
+            display: ${config.customControls.hideVolumeSlider ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-mute-button {
+            display: ${config.customControls.hideMuteButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-fullscreen-button {
+            display: ${config.customControls.hideFullscreenButton ? 'none' : 'block'} !important;
+          }
+        `;
+        document.head.appendChild(customControlsStyle);
+      }
+    } else if (video.controls) {
+      // controls=true이지만 특별한 설정이 없을 때, 기본 스타일 적용 (시간만 표시)
+      const defaultControlsStyle = document.createElement('style');
+      defaultControlsStyle.id = 'adstage-video-default-controls';
+      defaultControlsStyle.textContent = `
+        .adstage-video-container video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+      `;
+      
+      // 스타일이 이미 존재하지 않으면 추가
+      if (!document.getElementById('adstage-video-default-controls')) {
+        document.head.appendChild(defaultControlsStyle);
+      }
+    }
+    
+    // 기본값이 controls=false이므로 아무것도 표시하지 않음
+    if (this.debug) {
+      console.log('🎬 Video controls setting:', video.controls ? 'enabled' : 'disabled (default)');
+    }
+    
+    // 커스텀 음소거 토글 버튼 생성 (기본적으로 항상 표시)
+    const muteButton = document.createElement('button');
+    muteButton.className = 'adstage-video-mute-button';
+    muteButton.style.cssText = `
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(4px);
+    `;
+    
+    // hideControls가 true면 음소거 버튼도 숨김
+    if (config?.hideControls) {
+      muteButton.style.display = 'none';
+    }
+    
+    // 음소거 상태에 따른 아이콘 업데이트
+    const updateMuteButtonIcon = () => {
+      const mutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+        </svg>
+      `;
+      
+      const unmutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+        </svg>
+      `;
+      
+      muteButton.innerHTML = video.muted ? mutedIcon : unmutedIcon;
+      muteButton.title = video.muted ? 'Click to unmute' : 'Click to mute';
+    };
+    
+    // 초기 아이콘 설정
+    updateMuteButtonIcon();
+    
+    // 음소거 버튼 클릭 이벤트
+    muteButton.addEventListener('click', (e) => {
+      e.stopPropagation(); // 비디오 클릭 이벤트 방지
+      video.muted = !video.muted;
+      updateMuteButtonIcon();
+      
+      if (this.debug) {
+        console.log(`🔊 Video mute toggled: ${video.muted ? 'muted' : 'unmuted'}`);
+      }
+    });
+    
+    // 마우스 호버 효과
+    muteButton.addEventListener('mouseenter', () => {
+      muteButton.style.background = 'rgba(0, 0, 0, 0.9)';
+      muteButton.style.transform = 'scale(1.1)';
+    });
+    
+    muteButton.addEventListener('mouseleave', () => {
+      muteButton.style.background = 'rgba(0, 0, 0, 0.7)';
+      muteButton.style.transform = 'scale(1)';
+    });
+    
+    // 비디오 URL 설정
+    if (advertisement.videoUrl) {
+      video.src = advertisement.videoUrl;
+      
+      // 자동 재생을 위한 다단계 시도
+      const attemptAutoplay = () => {
+        if (video.autoplay && video.muted && video.paused) {
+          video.play().catch(error => {
+            if (this.debug) {
+              console.warn('🎬 Auto-play was prevented:', error);
+              console.warn('🎬 Trying muted autoplay fallback...');
+            }
+            // 음소거 상태에서 다시 시도
+            video.muted = true;
+            video.play().catch(fallbackError => {
+              if (this.debug) {
+                console.error('🎬 Autoplay completely failed:', fallbackError);
+              }
+            });
+          });
+        }
+      };
+      
+      // 다양한 이벤트에서 자동 재생 시도
+      video.addEventListener('loadedmetadata', () => {
+        if (this.debug) {
+          console.log('🎬 Video metadata loaded, attempting autoplay...');
+        }
+        attemptAutoplay();
+      });
+      
+      video.addEventListener('canplay', () => {
+        if (this.debug) {
+          console.log('🎬 Video can play, attempting autoplay...');
+        }
+        attemptAutoplay();
+      });
+      
+      video.addEventListener('loadeddata', () => {
+        if (this.debug) {
+          console.log('🎬 Video data loaded, attempting autoplay...');
+        }
+        attemptAutoplay();
+      });
+      
+      // 비디오 로드 시작 즉시 한 번 시도
+      setTimeout(() => {
+        if (this.debug) {
+          console.log('🎬 Initial autoplay attempt after timeout...');
+        }
+        attemptAutoplay();
+      }, 100);
+      
+    } else if (advertisement.imageUrl) {
+      // 비디오 URL이 없으면 이미지를 대체 표시
+      const img = document.createElement('img');
+      img.src = advertisement.imageUrl;
+      img.style.width = '100%';
+      img.style.height = '100%';
+      img.style.objectFit = 'contain';
+      img.alt = advertisement.title || 'Video thumbnail';
+      container.appendChild(img);
+      return;
+    }
+    
+    // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+    AdClickHandler.addClickEventForRenderer(
+      video,
+      advertisement,
+      slot,
+      () => this.createEventTrackingCallback(),
+      this.debug,
+      'Video'
+    );
+    
+    // 비디오 로드 에러 처리
+    video.addEventListener('error', (e) => {
+      console.error('Video load failed:', e);
+      
+      // 대체 이미지 표시
+      if (advertisement.imageUrl) {
+        const img = document.createElement('img');
+        img.src = advertisement.imageUrl;
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'contain';
+        img.alt = advertisement.title || 'Video thumbnail';
+        
+        // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+        AdClickHandler.addClickEventForRenderer(
+          img,
+          advertisement,
+          slot,
+          () => this.createEventTrackingCallback(),
+          this.debug,
+          'Video fallback'
+        );
+        
+        container.innerHTML = '';
+        container.appendChild(img);
+      }
+    });
+    
+    // 비디오와 음소거 버튼을 컨테이너에 추가
+    container.appendChild(video);
+    container.appendChild(muteButton);
+    
+    if (this.debug) {
+      console.log(`🎬 Video element created for ad: ${advertisement._id} (autoplay: ${video.autoplay}, muted: ${video.muted}, loop: ${video.loop})`);
+    }
+  }
+}