MONETIZATION · LAYOUT

Viewable Play

No ad request is made on player init. Once the player has been visible at the configured threshold for delay seconds, requestAds() + play() fires automatically — always muted.

adsViewablePlay

delay (s)

How long the player must remain visible before triggering. Timer resets if visibility drops.

threshold (0–1)

Intersection ratio required. 0.5 means 50% of the player must be visible.

ads

muted

Viewport triggers always start muted — no user gesture means the browser blocks unmuted autoplay and breaks the IMA preroll. Unmuted playback is only possible after a real user interaction.

Preroll Tag

Midroll Tag

sticky

enabled

corner

Screen corner where the sticky player is pinned.

requirePlaying

Player must be actively playing before it becomes sticky.

minPlayMs

Minimum watch time (ms) while visible before sticky is allowed.

unstickOnPause

unstickOnEnded

dismissMode

cooldown (d/h/m)

How long sticky stays dismissed after the user closes it.

days

hours

minutes

debug

Prints lifecycle events to the browser console.

How It Works

Init — Player loads with requestMode: "onRequest" set automatically — no ad request is fired, content waits paused.
Scroll — User scrolls down, player enters the viewport. IntersectionObserver triggers a 3s dwell timer.
Scroll Away — If visibility drops below 50%, the timer resets.
Trigger — Timer completes: requestAds() fires, then playback starts muted. A viewport trigger is not a user gesture — unmuted play would cause IMA to fail with ads-preroll-error.
Sticky — Once playback is running, scrolling the player out of view pins it to the BR corner.

JSON Config

{
  "ads": true,
  "autoplay": false,
  "muted": false,
  "adTagPreroll": "…",
  "adTagMidroll": "…",
  "adsViewablePlay": {
    "delay": 3,
    "threshold": 0.5
  },
  "sticky": {
    "enabled": true,
    "corner": "br",
    "requirePlaying": true,
    "minPlayMs": 800,
    "dismissMode": "cooldown"
  }
}

↓ Scroll down — once the player has been visible for 3s, the ad request and playback trigger automatically. After playback starts, scroll back up to see sticky in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt neque porro quisquam est.

Player 1 — id: …__p1

Player 2 — id: …__p2

Player 3 — id: …__p3

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt neque porro quisquam est.

Event Logs

HopeVideoJS is a flexible and customizable video player solution based on Video.js, developed by Umut Yaldız. It offers a modern and powerful media playback experience with its open-source structure.