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.
- controls=0 – Player controls do not display in the player. For IFrame embeds, the Flash player loads immediately.
- controls=1 – Player controls display in the player. For IFrame embeds, the controls display immediately and the Flash player also loads immediately.
- controls=2 – Player controls display in the player. For IFrame embeds, the controls display and the Flash player loads after the user initiates the video playback.
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’.
