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.
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.
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
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.
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.
Values: 0 or 1. Default is 1. This parameter indicates whether the player should show related videos when playback of the initial video ends.
<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’.