Video Ad Player Demo

Video Ad Player

This is a reusable video ad player component with sticky positioning. Scroll down to see the player stick to your selected corner. Use the controls above to toggle sticky mode and change the position.

AD
30s
0:000:30

Documentation

Props

  • videoSrc: URL of the video ad (or use publisherId for ad serving)
  • publisherId: Load ads via auction system
  • placementId: Ad placement identifier
  • adDuration: Duration of the ad in seconds
  • skipAfter: Seconds before skip button appears (default: 5)
  • enableSticky: Enable sticky positioning on scroll (default: true)
  • stickyPosition: Position when sticky - "bottom-right" | "bottom-left" | "top-right" | "top-left" (default: "bottom-right")
  • autoPlay: Auto-play video on load (default: true)
  • onAdComplete: Callback when ad finishes
  • onAdSkip: Callback when ad is skipped
  • onEventTrack: Callback for tracking events

Features

  • Integrated ad auction and VAST XML parsing
  • Play/Pause controls with keyboard support
  • Volume control with mute toggle
  • Fullscreen support
  • Progress bar with seek functionality
  • Ad countdown timer
  • Skip button (appears after specified duration)
  • Configurable sticky positioning (4 corner options)
  • Comprehensive event tracking (impressions, quartiles, completion, skip)
  • Responsive design for all screen sizes

Scroll to see sticky behavior

Scroll down the page to see the video player stick to the selected corner. The player will become sticky once the original video position scrolls out of view.

Content Section 1

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 2

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 3

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 4

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 5

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 6

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 7

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 8

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 9

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 10

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 11

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 12

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 13

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 14

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.

Content Section 15

This is placeholder content to demonstrate the sticky video player behavior. As you scroll down the page, the video player will stick to your selected corner if sticky mode is enabled. This is perfect for ensuring ads remain visible throughout the user experience. The sticky player includes a close button to minimize it if the user wants to dismiss the ad.

Video advertising is a powerful tool for brand awareness and engagement. With sticky video players, advertisers can ensure their message remains visible even as users scroll through content, leading to higher completion rates and better ROI on ad spend.