It’s important for entrepreneurs to understand technology, and at least the basics of how it works. In that spirit, I dusted off my Javascript skills because I wanted to modify my blog so that a video player would stay with the viewer as they were reading an article.
I dropped this sample video here so you can see how this works:
I’m using WordPress as my blog and it has some plug-ins that do this but they are large, bloated, and complex. They end-up bringing in all sorts of added Javascript and CSS that I didn’t like. I like WordPress in general but the platform can get bloated making even the simple-out of the box pages very heavy-weight in terms of bandwidth, performance, and complexity.
I ended up making a simple solution myself that anyone can add to their WordPress site without needing to add a plug-in while keeping the code edits pretty simple.
The Javascript can be added to the page loading functions. This is typically done by adding it to the theme header.
1
// WordPress has an outter div and an inner one that then contains the iframe // We move the inner frame while keeping the outter frame. var youtubeDiv; var video1; var video2; function initSizes() { youtubeDiv = document.getElementsByClassName('wp-block-embed-youtube')[0]; //fetch first video iframe video1 = document.getElementsByClassName('wp-block-embed\_\_wrapper')[0]; //fetch inner video video2 = document.getElementsByClassName('wp-block-embed\_\_wrapper')[1]; //fetch the second video on the page, if there is one } window.onscroll = function() { if (!youtubeDiv) { initSizes(); } else { // putting the init function in the scroll event allows us to drop this script anywhere on the page if (window.scrollY \> (video1.offsetHeight + youtubeDiv.offsetTop)) { video1.classList.add('stuck'); if (video2 && (video2.offsetTop \< (window.scrollY + window.innerHeight))){ //if there are two videos on the page and we're scrolling it into view video1.style.bottom = (window.scrollY - video2.offsetTop) + window.innerHeight + video1.offsetHeight + 10 + "px"; // move the video up } } else { // if we scrolled back up, reset the style video1.style.bottom = ""; video1.classList.remove('stuck'); } } };
The CSS is added directly to the theme, either in the theme customization or in your CSS files.
1
@keyframes fade-in-up { 0% { opacity: 0; } 100% { opacity: 1; } } .wp-block-embed\_\_wrapper iframe { max-width: 100%; max-height: 100%; } .stuck { position: fixed !important; bottom: 215px; right: 10px !important; transform: translateY(100%); width: 360px; height: 203px; animation: fade-in-up .5s ease forwards; }
I had originally found several plug-ins that did this with JQuery or other plug-ins but about dozen lines of Javascript is all that you need.
WordPress surrounds each video in a couple of DIV tags. The outer one acts as the place-holder (so the page doesn’t adjust size) and the inner one gets moved to the lower corner by adding a class.
We let the video float down the entire page until it either hits the bottom of the page or until we run into a second video. It figures out the height of the video and then applies a CSS class called stuck if the person has scrolled the first video off of the page.
The CSS class that gets added clobbers the position of the video and locks it to the bottom of the page. The script is simple and doesn’t do much with non-youtube videos and only minimally deals with multiple videos on the page. This could be added by looking for other classes in addition to the youtube but for now, it’s simple, quick and the perfect way to float my videos and make the experience of reading while watching just a little bit easier.
You can see and play with a CodePen version of this here.