Youtube Video Display Parameters

When posting a YT video on your web site, you have several options to control how it is displayed. The most annoying “feature” to me is the related videos that are displayed following the video. This is easily defeated with the parameter rel=0. Sometimes you have to play around with the settings to get it to all work. All the parameters available can be viewed on Google’s help page here: https://developers.google.com/youtube/player_parameters.

Here’s an example where the client wants the video to play when clicked then loop until the user clicks the video or leaves the page.

Here is the code for the above example (note: the < > are not displayed nor the close tag):
iframe width="560" height="315" src="https://www.youtube.com/embed/IfdurVJd09Q?loop=1&playlist=IfdurVJd09Q&showinfo=0&controls=0" frameborder="0" allowfullscreen

Let’s break it down:
iframe width="560" height="315" src="https://www.youtube.com/embed/IfdurVJd09Q
The size declarations and the YT video url start off the iframe. Your site should, of course, use responsive sizing for the video for all platforms (see here for info on that).

?loop=1&playlist=IfdurVJd09Q
This tells the video to loop. The second parameter is a hack to get a single video to loop. I guess ideally, the parameter was for playlists (multiple videos), so this addition is required when you only loop a single video. The value is just the video id from the url.

&showinfo=0&controls=0
The next two parameters clean up the player display. The showinfo parameter causes the player to not display information like the video title and uploader before the video starts playing. The second turns off the controls that display at the bottom. This has mixed results for the user. The display is much cleaner without the controls obscuring the very beginning of the video, but by turning them off, the user can only control the starting and stopping of the video. The user does not have access to all the controls available such as volume, closed captions, etc.

I also tried to insert the modestbranding parameter to remove the Youtube logo in the bottom right, but could not get it to work. It appears when you disable the top info bar you lose this ability, it’s an either/or situation.
You could also add an autostart parameter so the video starts to play automatically when the page loads. I opted to leave that out since some find this annoying.

As with all things Google (and life for that matter), this is subject to change. If something doesn’t work for you, just Google it!

One response... add one

Leave a Reply

Your email address will not be published. Required fields are marked *