YouTube Embed Tweaks

Standard YouTube Embed code is …boring!

The standard embed code that YouTube gives you is…okay. It isn’t amazing, it’s just functional. For example if you you want the viewer to start somewhere in the middle of the video, maybe because you are quoting that part of the video or maybe because you want to fast-forward the viewer to a funny part.

Well, the brains over at Google compiled a list of parameters for you to add to your embed code to customize it. I only will talk about some of the code, the useful bits. If you want to more, check out their page.

Basic code structure

Here is the basic structure of the embed code:

<iframe width=“SIZE in PIXELS” height=“SIZE in PIXELS” src=”http://www.youtube.com/embed/YOUTUBE-ID?OPTION&NEXT_OPTION&NEXT OPTION” frameborder=”0″ allowfullscreen></iframe>

where “OPTION” and “NEXT_OPTION” are the parameters I mention below. The key elements are:

• The question mark — ? — after your YouTube id code; the question mark is ONLY used after the id, no where else in the code. Also there is NO SPACE after the question mark.
• The ampersand — & — separates each parameter. Again there is NO SPACE after the ampersand.
• The end of the URL needs to end with a quotation mark — “ — as you can see in the above iframe embed code right before the word frameborder.
• This only works with “embed” URLs, not “watch” URLS. If you have a “watch” URL, just strip the YouTube id off of it and stick it in an “embed” URL.

As an example, I’m going to use a music video that Ryan and Tim shot a couple years ago. This version has no special embed codes added:

If you were to use nearly every option below, it would look like this:

<iframe width=“[SIZE in PIXELS]” height=“[SIZE in PIXELS]” src=”http://www.youtube.com/embed/YOUTUBE-ID?vq=hd1080&autohide=1&controls=0&fs=0&modestbranding=1&rel=0&showinfo=0&start=40&end=50” frameborder=”0″></iframe>

Note: I removed “allowfullscreen” since it conflicted with “fs”; if you click on the play arrow, it will fastforward to 40 seconds and play for 10 seconds. Also, with some browsers (Chrome) when a video is crammed into a small embed window (ours is 600 x 252), the HD won’t work until the video is played fullscreen. This isn’t a problem with Safari or Firefox.

Here is the resulting video:

A VERY noticeable difference between the above two videos!

So let’s break the code into pieces, so you can add only what you want!

A comment about default settings: with some of the parameters below there is a default setting. So you don’t always have to articulate every parameter to make it work. In fact, as is the case with fullscreen, stipulating the default can actually make it NOT work.

NOTE: for simplicity sake, going forward I’ll only show the URL part of the embed code since changing the width and height is straight forward. It will look something like this:

src=”http://www.youtube.com/embed/YOUTUBE-ID?OPTION“

 

Quality options:

Which quality you set as your default depends on both the quality of your video and the bandwidth of your average viewer. If your video is only 1280 x 720, pushing hd1080 is silly. Or if much of your audience is on slower connections, you might want to dial it back to 480p. Here are the various choices you have for the video quality (vq) parameter:

• vq=small    (240p)
• vq=medium    (360p)
• vq=large    (480p)
• vq=hd720
• vq=hd1080
• vq=highres (Pushes resolution higher than 1080 when applicable.)

Again, the highres push won’t work in some browsers (Chrome), but will get triggered when the video is played fullscreen.

Here is our example video at 240p and hd1080, most noticeable when played fullscreen:

src=”http://www.youtube.com/embed/oiwLndgxhUo?vq=small“

src=”http://www.youtube.com/embed/oiwLndgxhUo?vq=hd1080“

 

Autohide play controls options:

At times you want to see how far a video has played. Sometimes you instead want a clean player without any distractions. Well, autohide lets you adjust this.

• autohide=0 Progress bar and controls stay visible.
• autohide=1 Progress bar and controls hide once video starts; reappear Upon mouse movement.
• autohide=2 (default) Progress bar becomes thin once video starts playing; controls stay visible

Note: Some browsers (Chrome) require you to briefly “mouse over” the video to  trigger the progress bar to hide. This isn’t a problem with Safari or Firefox.

src=”http://www.youtube.com/embed/oiwLndgxhUo?autohide=0“

src=”http://www.youtube.com/embed/oiwLndgxhUo?autohide=1“

src=”http://www.youtube.com/embed/oiwLndgxhUo?autohide=2“

 

Autoplay options:

I’m not going to demonstrate this since some find it to be annoying, especially since there is no YouTube parameter (currrently) to mute the sound. However, a video without sound, especially if it is part of the background, can be fun to autoplay.

• autoplay=0 (default) Video doesn’t start until play is clicked.
• autoplay=1 Video starts upon loading.

src=”http://www.youtube.com/embed/oiwLndgxhUo?autoplay=1“

 

End options (only works for AS3 players):

Perhaps you have a video that you don’t want to play to the very end. The end option is the parameter for you!

• end=[seconds from start] Determine how many seconds from the start of the video that you want it to stop playing; user can click past it, though.

In the below example the video will end playing after 10 seconds:

src=”http://www.youtube.com/embed/oiwLndgxhUo?end=10“

 

Fullscreen options (only works for AS3 players):

With an embed on your webpage, there might be times when you don’t want the viewer to get so distracted with the video (via fullscreen) that you want to take this option away. This might be the case when you embed someone else’s video into your site as a joke or example.

• fs=0 Doesn’t allow user to view in fullscreen mode.
• fs=1 (Default) Allows user to view in fullscreen mode.

Note: Chrome browsers use a different code–allowfullscreen–placed elsewhere in the embed. Any “fs” code hides fullscreen in Chrome even with the presence of “allowfullscreen.” So if you want to permit fullscreen, don’t actually use “fs=1”; but since that is the default setting there really is no reason to articulate it. For Chrome browser, be sure to include allowfullscreen, though as shown in the Basic Code Structure section above.

src=”http://www.youtube.com/embed/oiwLndgxhUo?fs=0“

src=”http://www.youtube.com/embed/oiwLndgxhUo?fs=1“

 

Loop options:

Sometimes you might want a video to loop constantly, maybe because it is a popular song, or maybe it is an advertisement for your store.

• loop=0 (default) Video stops at the end and doesn’t loop.
• loop=1 Video loops once it reaches the end. NOTE: to make this work, it has to be used WITH playlist. If you only have one video, then playlist would be set to the same video: loop=1&playlist=[YOUTUBE-ID]

src=”http://www.youtube.com/embed/oiwLndgxhUo?loop=1&playlist=oiwLndgxhUo“

 

Modest branding options:

This parameter is nice because it doesn’t announce to the world that they are watching a video on YouTube. It does it by removing the YouTube logo on the video and on the progress bar. Instead it places the word YouTube in the title bar, but it is small.

• modestbranding=0 (default) YouTube logo is shown in lower right.
• modestbranding=1 YouTube logo is not displayed.

src=”http://www.youtube.com/embed/oiwLndgxhUo?modestbranding=0“

src=”http://www.youtube.com/embed/oiwLndgxhUo?modestbranding=1“

 

Playlist options:

Perhaps you have a list of videos you want to roll through on your site, maybe example videos of your product in action, or maybe a tutorial series. Using the playlist parameter, you can string all these together. It does create a longer embed code, but it is pretty straight forward.

• playlist=[YOUTUBE-ID2],[YOUTUBE-ID3],… String a list of videos together in your embed, separated with a comma. The first video [YOUTUBE-ID1] is already mentioned before the question mark so it doesn’t have to be repeated.

src=”http://www.youtube.com/embed/oiwLndgxhUo?playlist=HH-tlo4IQFg“

If you have many videos in your playlist, it would be easier to use the list parameter. This is done by creating a playlist in YouTube, then using the following code in you embed:

src=”//www.youtube.com/embed/videoseries?list=[LIST-ID]

So the following video playlist is the same as the above except it uses the list parameter instead of the playlist parameter;

src=”//www.youtube.com/embed/videoseries?list=PLeCSbcp6_EjBbBa9ajzASbG3gcdqQn40y

 

Related videos options:

Users of YouTube will know how it recommends other videos after your video has played. To turn this off (which I do all the time) use this parameter.

• rel=0 Shows thumbnail of video at end of video.
• rel=1 (default) Shows related videos at end of video

 

Show info options:

The title bar above a video does tell a lot about a video, but it also creates a lot of clutter in an embed. So using this parameter you can cleans things up a bit!

• showinfo=0 Hides info of video in title bar.
• showinfo=1 (default) Shows info of video in title bar.

src=”http://www.youtube.com/embed/oiwLndgxhUo?showinfo=0“

src=”http://www.youtube.com/embed/oiwLndgxhUo?showinfo=1“

 

Start options:

Just like with the end options parameter, start options allows you to control how much of the video your viewer watches. Of course they can always skip around on their own, but this fast-forwards them to a specific place in the video. If you combine the start and end parameters together, you are able to show your audience just a segment of the whole video.

• start=[seconds] Determine how many seconds from beginning of video that you want to start video.

In the below example the video will start playing 10 seconds into the video:

src=”http://www.youtube.com/embed/oiwLndgxhUo?start=10“

 

Theme color options:

There are two theme colors that you currently have to choose from: dark and light. One might look better on your website than the other, which makes this parameter useful.

• theme=dark (default) Player control theme is darker.
• theme=light Player control theme is lighter.

src=”http://www.youtube.com/embed/oiwLndgxhUo?theme=dark“

src=”http://www.youtube.com/embed/oiwLndgxhUo?theme=light“

 

Conclusion

Now that you know a few of the YouTube parameters that can be added to your video embeds, you can mix and match them or string a bunch together. It gives you power over how your video is presented, giving it a polished, professional look that exactly meets your needs.

Once you get comfortable with these parameters, check out the other ones which also might be useful: YouTube Embedded Players and Player Parameters

Are there any new ones that you know about, or creative other ways to tweak your YouTube videos? Let us know in the comment section below!