How to Keep a Video in View as Visitors Scroll

This script pins a video to the corner of the screen once a visitor scrolls past it, so it keeps playing in view. It's useful for long pages and for instructional videos that visitors follow while they scroll. Visitors can close the floating video with a button.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add the sticky video to your page

The script is hosted on GitHub as Fixed Video On-Scroll.

1. Add a video element to your page.

   

2. Add a button element to close the video.
3. Add the following CSS to the Stylesheets section:

<style>
  /* Replace with your 'close' button ID */
  #lp-pom-button-16 {
    display:none;
  }
  .lp-pom-video{
    transition:all 0.4s linear;
  }
.smallVid {
    left: 0 !important;
    top: 0 !important;
  	z-index: 999 !important;
    ms-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 0;
    transform-origin:0 0;
    position: fixed !important;
    display: block !important;
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);
  }
  .vidAdjust{
  	margin-top: 1%;
    margin-left: 1%;
  }
</style>

4. In the CSS, replace #lp-pom-button-16 with your close button's ID.
5. Add the following script to the JavaScripts section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
  //Replace with your video's ID
  var video = "#lp-pom-video-13";
  //Replace with your 'close' button ID
  var button = "#lp-pom-button-16";
  //Optional: adjust in pixels when the video transitions
  var showHeight = 400;
  var targetClass = "smallVid";
  var adjustClass = "vidAdjust";
  var classSelect = ".smallVid";
  var noClose = true;
  var initWidth = $(video).width();
  var initHeight = $(video).height();
  $(window).scroll( function() {
  if ($(this).scrollTop() > showHeight && noClose) {
    $(video).addClass(targetClass + " " + adjustClass);
    $(button).addClass(targetClass);
  } else {
    $(video).removeClass(targetClass, adjustClass);
    $(button).removeClass(targetClass);
  }
});
  $(button).click(function(){
    $(video).removeClass("smallVid vidAdjust");
    $(button).removeClass("smallVid");
    targetClass - null;
    adjustClass - null;
    noClose = false;
  });
</script>

6. In the script, replace the video and button values with the IDs of your video and close button.
7. (Optional) Change the showHeight value, in pixels, to control how far down the page the video starts to float.
8. Save and republish the page.

Test the change

Run an A/B test with a small share of traffic to confirm the floating video doesn't lower your conversion rate. See How to Run an A/B Test.