Advertisement
  1. Web Design
  2. UI Design
Webdesign

How to Create a “Sticky” Floating Video on Page Scroll

by
Difficulty:IntermediateLength:ShortLanguages:

If you have found yourself browsing media websites recently–video streaming services, news websites, Facebook and so on–you might have noticed a trend regarding their video players. If we scroll down a page where a video is present, it will float and shrink the player, sticking it to the side of the viewport instead of losing it from view.

This allows the users to keep an eye on the video, whilst looking through the other content at the same time. In this tutorial I’m going to show you how to recreate the same experience–so without further ado, let’s get started!

Examples

Just so we’re all on the same page, here are a couple of examples out in the wild:

Entertainment Weekly
Entertainment Weekly sends its videos to the bottom right of the viewport
CNN
CNN videos float up to the right

Adding YouTube Video

To begin with, let’s build the page markup along with a YouTube video. Crucially, we embed the video with the enablejsapi=1 parameter added; this parameter will allow us to interact with the video through the Youtube Iframe API.

At the bottom of the page, as you can see, we’ve also added three JavaScript files; namely jQuery, the script that provides us with the Youtube Iframe API, and the main.js where we are going to write our custom JavaScript.

Styling

You can style the page any way you wish, but the styles that we’re specifically concerned with here are the ones tied to the YouTube video. First, we add the styles to make the YouTube video responsive. These rules will ultimately also enable the container, .content-media--video, to retain its aspect ratio when the YouTube video is repositioned.

Floating Video Player Styles

Our next CSS rules define how the YouTube video should float. We’re using a selector .is-sticky-, which we’ll add to the player dynamically with JavaScript, to float the video on the page. This will also scale the video down to size, position it to the left, and adjust it for a couple of viewport sizes.

Note: you should adjust these properties (the size and the position) in accordance to your audience and the nature of your website. If, for example, your website content is written right-to-left, that might affect where you think best to place your video player.

Now when we load this page we can see the YouTube video is displayed along with some of our arbitrary content.

Writing JavaScript

We’ve come to the exciting part of this tutorial; the JavaScript! Our main.js file content at this point is as follows:

This above snippet equates to the $(document).ready(), which allows us to execute JavaScript once all the elements on the page have been parsed and are available.

Next, we define a number of variables. I’ve added inline comments to the side of each variable, to explain what’s going on.

Youtube Iframe API

As mentioned earlier, we’ve added the JavaScript file that provides access to the YouTube Iframe API. This API, once loaded, will trigger a function named onYouTubeIframeAPIReady. This function is available at the global level. And since our script is nested under the jQuery( function( $ ) { });, we have to reach this function out in the window object, as follows:

As you can see within the function, we’ve selected the ID attribute of the iframe as well as passing a function named onPlayerStateChange. This function will be triggered when the YouTube video player is played, paused, or ended.

The onPlayerStateChange passes an Event object which provides us with usable pieces of data. In this case, for example, we will use the Event .data object to get the video state.

The video state, as you can see below, is represented with a number; 1 is when the video is playing, 2 is when the video is paused, and 3 is when the video ends. We will add and remove a class name accordingly when the state is changed.

Floating and Sticking the Video

What follows is the code to float and stick our video player. It is worth noting that we should only float the video when the video is playing. Therefore, we first check the iframe to see if it has the is-playing class before adding the is-sticky class:

Test what you’ve done and you should see things working!

Floating video demo
Final demo

Conclusion

We’re done! This tutorial aimed to get you started, giving you the fundamentals of how to float a video similarly to media websites you may have seen. We used jQuery to makes the code simpler, shorter, and easier to understand for readers in general.

In a real project, however, you will probably have to tweak details here and there depending on the project complexity. For example, you might want to run the scrolling function in a Throttling function to reduce function calls. You might also need to adjust the video position and size following the site layout on a mobile device, so on and so forth.

Nevertheless, check out the demo, play the video and get scrolling!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.