Basic YouTube Video Embed Tips

 

YouTube makes it super easy for anyone to post videos on their own website by simply copying and pasting the embed code. Using YouTube’s iframe embed code is a good way to go as it supports both flash and HTML5 – serving up the correct player for the viewer’s device. The default YouTube iframe embed code looks like this:

<iframe src="//www.youtube.com/embed/eg6kNoJmzkY" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

And renders like this in your browser:

 

Embed Code Options

By adding a few parameters to the URL in the embed code you can change a few aspects of the players appearance and behavior. I outline some of them below. A full list and documentation can be found here.

autohide
Values: 2 (default), 1, and 0. This parameter indicates whether the video controls will automatically hide after a video begins playing. The default behavior (autohide=2) is for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible.

autoplay
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

controls
Values: 0, 1, or 2. Default is 1. This parameter indicates whether the video player controls will display.

modestbranding
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user’s mouse pointer hovers over the player.

rel
Values: 0 or 1. Default is 1. This parameter indicates whether the player should show related videos when playback of the initial video ends.

An Example

<iframe width="560" height="315" src="http://www.youtube.com/embed/eg6kNoJmzkY?&rel=0&showinfo=0&modestbranding=1&hd=1&autohide=1" frameborder="0" allowfullscreen></iframe>

Notice in the embed code how these parameters are included by adding a ‘?’ then the parameter name followed by ‘=’ then the parameter value. Each parameter=value is separated by an ‘&’. I wanted to go for a simpler, cleaner look so I chose to hide the title and info with ‘showinfo=0’ and hide the control bar with ‘autohide=1’. In this instance I don’t want YouTube to show a bunch of related videos (which I have no control over) after my video has finished playing. So I added ‘rel=0’.