Web Design, Programming, and Business

Autoplay Vimeo Video When Coming Into Viewport

One of our clients was looking for a solution that would allow them to play video that was embedded on a scrolling page BUT only when they came into view. That way, the videos would start playing only when the site visitor could see them.

After looking at a couple of different solutions, I realized that the best approach was to write some custom JavaScript that would utilize the Vimeo player API.

Follow the links here to download the demo script or view the On-screen video demo.

Here’s step by step, how it all works.

I’m utilizing the Vimeo Player that can be downloaded from https://github.com/vimeo/player.js. You’ll see in this demo that I included play and pause buttons so you can test just the player portion of it. I’m also using jQuery 3.5.1, using the jQuery CDN.

I put most of the JavaScript code into the onscreen_video.js file to keep it clean. I have a simple script that adds the method “isOnScreen” to jQuery so I can more easily call it to detect when DOM elements are displaying within the viewport.

In the function thriveLoadVideo, I pass in 2 parameters: the ID of the div container and the ID of the Vimeo video. I’m showing the video at a 600px hieght and display notifications to the console of the player status for when it’s loaded, played, and paused. I’ve left them in for this demo for easier testing.

On the HTML page, I include DIV containers for the 2 videos that I’d like to play. You’ll notice that I have a 2000px tall div. This is just to make sure you have to scroll down to see the next video.

Each video that you want to play automatically when they’re on screen is instantiated and set up with 2 lines. The first line defines what video to play. The second attaches our listener to the div to either play or pause the video depending on if it shows in the viewport.

NOTE: You can only hide the video controls if you have a professional Vimeo account. Also, I used Vimeo for this solution since it doesn’t have the annoying video recommendations at the end of the video like YouTube.

Please note that this script is purely AS-IS and I’m sharing it in hopes to help out other developers! If this was useful for you, please share or link to my website. Thanks and happy coding!

 

About the author

Aaron Day

Professionally building websites since 2002, I've worked at Microsoft, multiple agencies, and a few web design businesses of my own, including White Whale Web, a Boise-based web development agency. Previously, I was an owner of Thrive Web Designs from 2015 to 2022. I've taught classes, run design groups and even ran a benefit auction for 4 years in my free time. I love sharing and giving back to the web/creative community.

By Aaron Day
Web Design, Programming, and Business

Meet Aaron Day

Professionally building websites since 2002, I've worked at Microsoft, multiple agencies, and a few web design businesses of my own, including White Whale Web, a Boise-based web development agency. Previously, I was an owner of Thrive Web Designs from 2015 to 2022. I've taught classes, run design groups and even ran a benefit auction for 4 years in my free time. I love sharing and giving back to the web/creative community.

The owner of this website has made a commitment to accessibility and inclusion, please report any problems that you encounter using the contact form on this website. This site uses the WP ADA Compliance Check plugin to enhance accessibility.