Skip to main content

How to Create Minimized Sticky Videos on Scroll in Stack

Enhance your website's user experience by turning regular videos into minimized sticky videos as users scroll down the page. This guide will walk you through adding custom code to achieve this effect.

Example Code Snippets​

To implement sticky videos on your site, you'll need to use a combination of CSS and JavaScript. Here's an example of how you can set this up:

CSS Styling​

First, add the following CSS to define the style for your sticky video:

<style>
  .sticky-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    width: 300px !important;
    height: 200px !important;
  }
</style>

JavaScript Functionality​

Next, use this JavaScript to change the video’s class based on the scroll position:

<script>
  window.onscroll = function() {handleScroll()};

  function handleScroll() {
    if (document.body.scrollTop > 90 || document.documentElement.scrollTop > 90) {
      document.getElementById("video-YOURCSSVIDEOSELECTOR").className = "sticky-video";
    } else {
      document.getElementById("video-YOURCSSVIDEOSELECTOR").className = "";
    }
  }
</script>

CSS Selector​

Ensure your video element has the correct ID in your HTML:

#video-YOURCSSVIDEOSELECTOR {
  float: left;
}

Implementation Steps​

  1. Add CSS: Insert the CSS snippet into the <head> section of your HTML file.
  2. Add JavaScript: Place the JavaScript code at the bottom of your HTML file, just before the closing </body> tag.
  3. Update the Selector: Replace YOURCSSVIDEOSELECTOR with the actual ID of your video element.

By following these steps, your video will minimize and stick to the top of the screen as users scroll down, providing a seamless viewing experience. Adjust the dimensions and position in the CSS to fit your design needs.