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!

 

6 Comments

iPhone Video Training Tip: Adding Voiceover


iPhone Video Training SeriesThere are many times when you’ve finished shooting your iPhone video but realize you need to add voiceover narration to your project. This might be done to explain what the viewer is watching or perhaps to walk the audience through a step-by-step task. In this video we show you how to easily add voiceover to your iPhone video.

We use an iPhone 4S running on iOS 7, but any smart device running on most

(more…)

1 Comment

iPhone Video Training Tip: Correcting Upside-Down Videos


iPhone Video Training Tip: Correcting Upside-Down VideosThe iPhone is a very smart gadget, but sometimes it’s sensors override reality. A prime example of this is when taking pictures or video at an odd angle: the iPhone’s gyroscope thinks that the picture or video was taken at a different orientation resulting in it displaying it at 90 or 180 degrees from the way you wanted to record it. Another scenario is if you hit the record button then change the iPhone’s orientation.

Problems get compounded when you try to edit this video. But there is a solution! In this video (more…)

0 Comment

iPhone Video Training Series: Accessories


iPhone Video Training Series: AccessoriesIn this final training video we cover a few useful accessories that will help you as you shoot your iPhone videos. We will talk about monopods, lapel mics, and lenses made exclusively for iPhones (crazy, I know!).

These accessories are reasonably priced and are worth their weight since they will vastly improve the quality of your iPhone videos.

(If you haven’t watched the first two training videos — Introduction and Production Tips – we recommend you review those first.)

We use an iPhone 4S running on iOS 7, but any smart device running on most (more…)

0 Comment

iPhone Video Training Series: Production Tips


iPhone Video Training Series: Production TipsNow that you’ve watched the introductory video in our iPhone Video Training Series, it’s time to cover more advanced issues: lighting, framing, and advanced editing of your videos. These tips help you improve your filming and editing techniques so your final product has a more professional look.

We use an iPhone 4S running on iOS 7, but any smart device running on most current operating systems should be fine. The (more…)

0 Comment

iPhone Video Training Series: Introduction


iPhone Video Training Series: IntroductionVideo content is a must for businesses and brands. But some organizations don’t have the resources to hire a video production company to create content for them.

Never fear!

In this training series we give you tips to film content with a camera that nearly everyone has: the camera in your iPhone or other smart device. Whether you are using the new iPhone 5S, the Samsung Galaxy 4, or some older (more…)

0 Comment

Immigrant


ImmigrantFear of the “other” is not new to America. However we are a nation of immigrants, whose very society was built and made stronger by the hands of those who traveled here before us.

With the often negative and dehumanizing rhetoric in the current immigration debate, maybe it is time to step back and reflect on what it is that makes us strong, and what values this country was built on.

We recently produced this PSA to remind people that fears of the “other” are just as unfounded today as they were when this nation began.

Continue reading to watch the 1 minute PSA, read the transcript, and to get links to the original quotes in their full context. (more…)

0 Comment

Enric Sifa (Music Video): I Wanna See You Tonight


Enric SifaEnric Sifa is a talented Singer/Songwritter and musician who experienced the Rwandan Genocide first-hand, losing both parents to the conflict at the age of 9. Not one to let the trials of life over come him, he has used music to better his own life and provide hope and inspiration to those around him. Enric continues to use his talents to give back and advocate for marginalized children around the world.

It is this passion and drive to pursue a career in human rights and conflict resolution that drew us to Enric. He embodies the type of people and organizations we are most excited about – those who create positive change in the world around them.

While we were in pre-production on his music video, Letus contacted us to test a new camera accessory: the Helix. This new camera device opens up creative camera movements that were previously only available to very expensive productions. Enric’s music video was the perfect opportunity to try out the Helix since it would allow us to add some great styling to the shots.

Continue below to watch the video, view the behind the scenes photos, and read the lyrics. (more…)

0 Comment
« Older Entries