HopeVideo JS - Sticky

Demo Control Panel

All labels and tooltips are in English. This panel writes to localStorage (UI persistence) and re-mounts players on Apply.

Player

Player ID?Unique identifier used by your registry. In infinite blocks, the page auto-appends a suffix to avoid collisions.Muted?If true, the video starts muted. Useful for autoplay compliance on browsers.Autoplay?If true, the player attempts to autoplay. Your sticky logic may treat autoplay as 'not user initiated'.Ads Enabled?If true, the demo enables IMA / ads flow. Sticky logic also listens to ad lifecycle events.

Sticky Basics

Sticky Enabled?Master switch. If false, this player will never become sticky.Registry Name?Global window registry object name (e.g., window.HopePlayers). Used by HopeStickyManager to find hp instances by key.Wrapper Class (Default)?Class name used to find the wrapper element around the player. Must exist in DOM.Sticky Active Class?Added to the wrapper when sticky is active. Your CSS should position the player when this class exists.Sticky Idle Class?Optional class added when a player is registered and sticky-capable (but not currently sticky). Leave empty to disable.Corner?Preferred corner used when sticky activates. This maps to stickyCornerClass.* and your CSS.

Corner Class (br)?CSS class applied when corner is 'br'.Corner Class (bl)?CSS class applied when corner is 'bl'.Corner Class (tr)?CSS class applied when corner is 'tr'.Corner Class (tl)?CSS class applied when corner is 'tl'.

Eligibility & Timing

Require Playing?If true, the player must be actively playing (or in an ad) to become sticky when leaving the viewport.Min Play (ms)?Minimum watched time while the player is both visible and active (content/ad). If not satisfied, sticky is blocked.Unstick On Pause?If true, pausing (or ending) while sticky will automatically return the player to its normal position.Unstick On Ended?If true, when the video ends while sticky, it returns to normal position. Disable this for playlist-style players where the source changes after ending.Only One Sticky?If true, only one sticky player may exist at a time. When a new one becomes sticky, the previous is paused and unstuck.

In-View Autoplay

Play On Enter View?If true, when the player enters the viewport, the manager will attempt to call player.play(). If the browser blocks autoplay, it fails silently.Only If Muted?If true, in-view autoplay is attempted only when the player is muted (policy-safe). If the player is not muted, no autoplay attempt is made.Debounce (ms)?Wait time after entering the viewport before attempting play(). Helps avoid jitter when the element barely intersects while scrolling.

Close on Another Play

Close Active Sticky on Another Play?If true, when another player becomes user-initiated active, the current sticky is closed (paused + unstuck).Only if User Gesture?If true, only closes sticky if the triggering play/ad-start happened shortly after a real user gesture (click/tap/keyboard).Gesture Window (ms)?How long after a user gesture a play/ad-start is considered user-initiated.Pause→Resume Block (ms)?After a user pauses, play events within this window are NOT treated as user-initiated (prevents accidental re-sticky).UserPaused TTL (ms)?If the user paused a player, sticky is blocked for this amount of time. After TTL, it can become sticky again.

Intersection Observer

Intersection Threshold?Minimum intersection ratio for 'in view'. Higher means stricter (needs more of the element visible).Root Margin?IntersectionObserver rootMargin. Useful to trigger sticky earlier/later (e.g., negative bottom margin makes it 'out of view' sooner).

UI Helpers

Use Placeholder?If true, inserts a placeholder div so layout does not jump when the wrapper becomes fixed (sticky).Placeholder Class?CSS class assigned to the placeholder element. Use it to style/debug placeholder behavior.Close Button?If true, renders a close button while sticky. Clicking it applies global dismiss and closes the active sticky player.Close Button Class?CSS class for the close button element (you can use background-image icons, etc.).

Dismiss & Cooldown

Dismiss Mode?none: do nothing. cooldown: disable sticky for a time window after close. never: disable sticky permanently after close.Cooldown (days)?Cooldown duration days part. Only applies if dismissMode=cooldown.Cooldown (hours)?Cooldown duration hours part. Only applies if dismissMode=cooldown.Cooldown (minutes)?Cooldown duration minutes part. Only applies if dismissMode=cooldown.

Persistence & Analytics

Storage?Where dismiss state is stored. local/session persist across reloads. memory resets on refresh.Storage Key Prefix?Prefix used to store dismiss state keys. Reset button will delete keys starting with this prefix in the selected storage.Reset clears keys that start with this prefix from the selected storage.dataLayer Name?Global dataLayer array name for analytics events (e.g., window.dataLayer). If missing, pushes are skipped.Debug Logs?If true, prints debug logs (IO flips, maybeStick blocks, active transitions). Disable for production performance.

Lorem ipsum dolor sit amet

Aliquam eu ultrices sem. Proin dolor elit, vehicula in sollicitudin nec, elementum nec elit. Vestibulum hendrerit orci ligula, sit amet commodo lectus interdum eu. Nunc venenatis consequat neque convallis ultricies. Cras semper orci nisi, id tincidunt nisl scelerisque et. Sed eu sodales felis, vitae auctor est. Sed bibendum egestas scelerisque. Nulla nec sem cursus, finibus tellus in, consectetur quam. Suspendisse eu dui nec justo lacinia varius id ac urna. Donec auctor ante a augue sagittis, in pulvinar quam consequat.

Nullam ut odio efficitur, lobortis sem eget, vehicula nisl. Donec elit felis, pulvinar vel nisi eu, finibus efficitur neque. Morbi mauris nisi, iaculis quis aliquam vel, posuere ac mauris. Aenean a augue elementum, finibus purus id, blandit nunc. Phasellus mauris lacus, feugiat ac imperdiet ut, fringilla non turpis. Nulla ut odio a eros porta rhoncus. Phasellus justo sem, efficitur et mi eu, placerat tristique ex. Suspendisse a varius nibh, eget rutrum felis. Ut quis dui mollis, varius lectus ac, ultricies sapien.

Nunc condimentum maximus nulla nec rhoncus. In et sapien lacinia, pharetra enim ut, mattis elit. Nullam a venenatis magna, at pulvinar ante. Duis ac sapien maximus, lacinia velit eget, tincidunt sem. In hac habitasse platea dictumst. Etiam eros massa, rutrum quis venenatis sit amet, vestibulum vel mi. Donec et pretium arcu.

Phasellus nec nunc et velit iaculis feugiat. Morbi tellus enim, ullamcorper eu vehicula quis, pretium id elit. Proin quis erat sem. Cras fermentum dolor erat, non bibendum arcu faucibus nec. Mauris iaculis nibh consequat, molestie arcu nec, ornare felis. Nulla tincidunt, neque ut accumsan euismod, felis lorem semper nibh, in maximus odio ex eget turpis. Fusce sodales aliquam gravida. Maecenas cursus quam eget ligula fringilla placerat. Integer sit amet lacus at arcu porta tincidunt non id mauris. Nam consequat tincidunt metus id varius. Phasellus non tincidunt nibh, at pretium velit.

Suspendisse vitae fringilla velit. Donec molestie ante eu ex venenatis ullamcorper. Vestibulum elit lectus, dictum congue feugiat nec, iaculis eget nulla. Aliquam a neque enim. Suspendisse tellus nulla, facilisis quis convallis non, tristique sed augue. Sed auctor purus diam, quis pharetra dolor mollis nec. Nunc et tellus in nulla facilisis consectetur. Suspendisse et dui convallis, sollicitudin sapien a, aliquet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ullamcorper ut ex non bibendum. Nullam quis dictum enim, ut porta libero. Sed ut magna vel leo blandit scelerisque. Nullam blandit laoreet ex vitae tristique. Ut blandit imperdiet tellus at posuere.

Playlist Example Sticky

Integer scelerisque, quam eu varius dictum, dolor orci egestas lacus, et rutrum erat arcu ut arcu.

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