A few days ago we released version 1.1 of our great new magazine theme for WordPress, Public Opinion, and I’m here to share with you the basics of how we added floating, sticky videos to the theme’s video post formats so that you can easily add it on your own website if you wish!
Here’s what we’ll be making (scroll up and down to see it in action, also start playing the video, it won’t stop while repositioning!):
High level overview
The HTML we’ll be using is pretty simple, but we need to wrap the iframe with two div elements. The
.video</code. element is what we'll actually position on the bottom right, and we'll keep its parent (
.video-wrap) in place, as a reference of the video's initial position. It'll soon become much clearer why.
That’s pretty much every style we need including the slide up animation.
Notice that we pretty much only provide styles for when the video is stuck (i.e. when it has the
.stuck class), and just force the underlying iframe to take up its dimensions. As you can see, what we’re doing here is placing it on the bottom right of the viewport, and reducing its size (width and height). For the added effect, we also sprinkle a fancy sliding up CSS animation.
We’ll just need a mere seventeen lines of jQuery to make everything work:
Let’s break it down.
On the first few lines we cache the required elements into variables, as a good practice. This avoids needless allocations every time we scroll in the page.
Notice that on line 4 we also store the original video’s height:
The reason we do this is to keep the content below the video from jumping around when we apply
position: fixed to the video element. Remember that fixed position elements (like absolutely positioned ones) escape the page’s flow and leave “empty space” behind. When the video floats, we’ll apply this height to its parent wrapper making the content below completely oblivious to the video’s absence. That’s one of the reasons why we needed an extra parent element.
After this basic set up, we’re attaching a scroll event listener to the
window element. While we scroll, we keep checking whether the total amount of the window’s vertical scroll is bigger than the distance from the bottom of the video element to the top of the document.
To get the total amount the page is scrolled at any point we use jQuery’s handy
.scrollTop method on the
window object which gives us exactly that.
To get the bottom vertical position of an element, we only need to calculate its top offset (which is the distance from the top of the element to the top of the document) plus the element’s height. Here’s a small diagram to help you visualize it:
So all we need to check is if the window’s
scrollTop amount is greater than the video bottom’s distance from the top, and when it’s true, make the video float by simply applying the
.stuck class we coded earlier with CSS.
At the same time, we also apply the initial height to the video’s outermost parent to prevent the content from jumping. When the scroll is back up and the video gets into view (i.e. when
windowScrollTop is less than
videoBottom) we remove the stuck CSS class and reset the parent’s height to
And that’s it! Keep in mind that this technique will work with any kind of video provider, YouTube, Vimeo (pretty much with all of WordPress’s supported video providers), and also any kind of element (doesn’t have to be a video!).
Here’s the final result again:
What do you think of floating videos? Helpful or distracting? Let us know in the comments! (Thankfully, our themes include an on/off setting, like with most features!)