How do I optimize and embed Youtube videos on my website?
Here are a few steps that you can use to boost your site UX and keep people on your site:
The regular embed iframe snippet looks like this:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mmUjJjPx3NI” frameborder=”0″ allowfullscreen></iframe>
This will produce a video that looks like this:
When the video finishes it will also give the viewer the option to select another related video to watch.
This won’t take the user off the website, but it can distract them from the purpose that brought them to your website in the first place.
A few simple additional parameters added to the snippet and you are good to go.
First off, when you add a parameter you begin with a question mark(?) and then every following parameter you begin with a ampersand(&).
The result of these parameters clean the video up in ways that keep the viewer focused on the webpage.
First parameter to add is “?rel=0”
This indicates whether the player should not show related videos when playback ends.
The next parameter to add is “&showinfo=0”
This will take away that annoying video title bar at the top of the thumbnail along with the watch later and uploader controls.
Lastly, add this parameter “&autohide=1”
This parameter indicates whether the video controls will automatically hide after the video begins playing regardless of the video players dimensions, the video progress bar and player controls display or hide automatically.
Your completed snippet should look like this:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mmUjJjPx3NI?rel=0&showinfo=0&autohide=1″ frameborder=”0″ allowfullscreen></iframe>
The resulting video will look like this:
If you want a list of more video player parameters check out this link.
April 29, 2016