Landing Page Tip: How To Auto-Play a YouTube Video

Here at Sparkhub, we love the idea of using landing pages - namely, Project Broadcast Landing Pages (PBLPs) - to house content for our audiences. After all, Sparkhub can spice up your PBLPs with powerful automation, enabling you to have customized event content with zero editing.

And our users know that video is a great way to add some visual interest to a Project Broadcast Landing Page. But what if you want a video to play automatically - for instance, as a banner at the top of a page - to show beautiful footage as soon as your site visitor arrives?

Well, there's good news: to auto-play a video, all you need is a little simple code.  

(Want to create landing pages in Project Broadcast? Join PB here: sparkhub.app/pb)  

Here are the steps!

Step 1

Add a code block and paste in this code: 

<iframe width="480" height="270" src="https://www.youtube.com/embed/UiIRlg4Xr5w?&autoplay=1&mute=1"frameborder="0" allowfullscreen></iframe>  

Step 2 (optional) 

If desired, you can change the dimensions of the iframe that your video will reside in. (My code has a width of 480 pixels to match a default PBLP width. The height is proportional to the width.)

Step 3

Replace the code's video ID (namely, UiIRlg4Xr5w) with the ID from your own video, which you can see in your video's url. For instance, if your video is at youtube.com/watch?v=3Xl0Qr0uXuY, the ID you need is 3Xl0Qr0uXuY. Be sure to paste this in between the slash and the question mark, leaving them in.

Step 4 (optional)

Adjust any parameters on the code's URL that you wish. Remember, "1" means "yes" or "true," and "0" means "no" or "false." The code above makes the video auto-play, on mute (a requirement for auto-playing). But there are other options, such as showing closed captions by default. The full documentation of available parameters is here: https://developers.google.com/youtube/player_parameters

Step 5

Hit Save and view your page in a separate browser tab or window to see the final result!  

Notes:

1. By embedding videos from YouTube, you are agreeing to their API terms of service.
2. This technique will not work if your video is private. 

Tip:

You'll want to use this sparingly on your page! Test to make sure multiple auto-playing videos aren't slowing the page down or adding visual overwhelm. Use this technique for adding to the page's vibe, not for overloading with content that should, instead, be consumed in a self-paced manner by the viewer. 

Happy creating!