Video Ads

Video ads are high‑engagement, visually impactful ad formats. The AdStage SDK uses the HTML5 video element, supports mobile optimization, and offers rich playback options.

🎯 Basic Usage

Simple Video Ad

// Prepare container in HTML
// <div id="video-container"></div>
 
// Create a basic video ad
AdStage.ads.video('video-container', {
  width: 640,
  height: 360
});

Handling Click Events

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  onClick: (adData) => {
    console.log('Video ad clicked:', adData);
    // Add custom logic here
  }
});

⚙️ Configuration Options

Core Options

Option	Type	Default	Description
`width`	`number`	`640`	Video width (px)
`height`	`number`	`360`	Video height (px)
`autoplay`	`boolean`	`true`	Autoplay enabled
`muted`	`boolean`	`true`	Start muted
`controls`	`boolean`	`false`	Show native controls
`onClick`	`function`	`undefined`	Fired when ad is clicked

Advanced Options

Option	Type	Default	Description
`loop`	`boolean`	`true`	Loop playback
`playsinline`	`boolean`	`true`	Inline playback (mobile)
`customControls`	`object`	`undefined`	Fine‑grained UI control

Filtering Options

Option	Type	Default	Description
`adId`	`string`	`undefined`	Force a specific ad ID
`language`	`'ko' \| 'en' \| 'ja' \| 'zh'`	`undefined`	Language filter
`deviceType`	`'MOBILE' \| 'DESKTOP'`	`undefined`	Device type filter
`country`	`'KR' \| 'US' \| 'JP' \| 'CN' \| 'DE'`	`undefined`	Country filter

Note: Video ad flow is optimized for a single creative (maxAds: 1).

💡 Practical Examples

Use the simplest CDN approach directly in HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video Ad Example</title>
</head>
<body>
  <h1>My Website</h1>
  
  <!-- Video Ad Container -->
  <div id="video-container" style="width: 640px; height: 360px; margin: 20px auto; border: 1px solid #ddd; border-radius: 8px;">
    Loading...
  </div>
 
  <!-- AdStage SDK -->
  <script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
  <script>
    AdStage.init({ apiKey: 'your-api-key' });
 
    AdStage.ads.video('video-container', {
      width: 640,
      height: 360,
      autoplay: true,
      muted: true
    });
  </script>
</body>
</html>

🚀 Advanced Features

Custom Controls

Fine‑tune which controls appear in the player.

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  controls: true,
  customControls: {
    hidePlayButton: false,
    hideProgressBar: false,
    hideVolumeSlider: false,
    hideFullscreenButton: true
  }
});

Responsive Video

Adapt video dimensions to viewport size.

const getResponsiveVideoSize = () => {
  if (window.innerWidth <= 768) return { width: '100%', height: 200 };     // Mobile
  if (window.innerWidth <= 1024) return { width: 640, height: 300 };       // Tablet
  return { width: 640, height: 360 };                                     // Desktop
};
 
const { width, height } = getResponsiveVideoSize();
 
AdStage.ads.video('video-container', {
  width,
  height,
  autoplay: true,
  muted: true,
  deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
window.addEventListener('resize', () => {
  AdStage.ads.destroy(slotId);
  const newSize = getResponsiveVideoSize();
  slotId = AdStage.ads.video('video-container', {
    ...newSize,
    autoplay: true,
    muted: true
  });
});

Forcing a Specific Ad ID

AdStage.ads.video('video-container', {
  width: 640,
  height: 360,
  adId: 'video-ad-789'
});

🔧 Optimization Tips

1. Maintain Aspect Ratios

AdStage.ads.video('video-container', {
  width: '100%',
  height: 'auto' // Auto adjust respecting aspect ratio
});

2. Background Loading

const slotId = AdStage.ads.video('video-container');
console.log('Slot created:', slotId); // Immediate

3. Automatic Cleanup

const slotId = AdStage.ads.video('video-container');
document.getElementById('video-container').remove(); // Slot auto cleaned

🎨 Styling

SDK CSS Classes

.adstage-video-ad { /* Base container */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
 
.adstage-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, #000 25%, #333 50%, #000 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
 
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
 
.adstage-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}
 
.adstage-error {
  border: 1px solid #ff6b6b;
  background-color: #ffe0e0;
}

Slot State Inspection

const allSlots = AdStage.ads.getAllSlots();
console.log('All ad slots:', allSlots);
 
const slot = AdStage.ads.getSlotById(slotId);
console.log('Slot info:', slot);

Video Ads

Table of Contents