Tutorial: "Sticky" Video (Like Facebook Does It)

Get The Full Information About Our “Done For You” Website Packages

Leave Your Details And Get This Info NOW...

No doubt you will have seen this on Facebook and various other sites. It draws attention to the video and will most likely increase the number of views of the video. I will implement it on some client's sites and look at the analytics data and see what impact it has.

It's really very simple, it's just a matter of adding a class to the video container when the page is scrolled sufficiently that the video is off screen. That class sets the position of the video container to absolute and anchors it to the top right of the screen.

You should be able to implement this on ANY platform that allows you to add custom JavaScript and CSS!

Here's the JavaScript (requires jQuery)

var distance = jQuery('.sticky-video').offset().top,
$window = jQuery(window);

jQuery(window).scroll(function () {
  if ( $window.scrollTop() >= distance + 300 ) {
    jQuery('.sticky-video').addClass('pinned');
  } else {
    jQuery('.sticky-video').removeClass('pinned');
  }
});

 

You will need to play around with the distance as it will be different on each website. In this example it's set to 300px - that's the distance the page has to be scrolled before the video snaps to the top corner. With a bit more work it ought to be possible to detect when the video has been scrolled past rather than having to set a fixed pixel value.

Here's the CSS

@media only screen and (min-width: 768px) {

  .sticky-video {
    transition: left .5s, width .5s ease, height .5s ease;
  }

  .sticky-video.pinned {
    position: fixed;
    width: 300px;
    z-index: 100000;
    top: 0;
    right: 0;
  }
}

 

And that's all there is to it! If you have a go at implementing it and you get stuck, the first thing to do is make sure the JavaScript is working and is adding/removing the class of 'pinned' to the video container. If you get really stuck and so frustrated that you want to scream you can email me and I might be able to help you, depending on how busy I am: flemming@directresponsept.com

 


Looking for Information About Website Packages?

Yes! Send Me All the Details About Websites! »
Just click the button above and then fill out the simple form...