2012 YouTube Embed Code – Autoplay On and All Other Parameters

How to Embed YouTube Videos

Firstly, here are the 5 simple steps to get the embed code for your YouTube video:

Note: The  iFrame type embed codes supports playback on Flash and HTML5 video. This means it will work on computers AND mobile devices. It will load either the AS3 player (Flash) or the HTML5 player depending on whether the viewer’s browser supports it.

The old embed code (if you choose it) is the AS3 player and will only work on computers and mobile devices that support Flash. I therefore do NOT recommend using the OLD embed code unless you are not concerned about the video not being playable on mobile Internet devices. I will now show you how to customize some common parameters for your video.

How to Customize Embed Code Parameters

For the newer IFrame embed codes, you would just add the parameter at the end of the Youtube URL. Start with the “?” symbol to indicate you are adding parameters. If you add more than 1 parameter then use the “&” symbol for subsequent parameters.

For the old embed code, you will add the parameters to the end of the Youtube video URL after the “?version=3″ and using the “&” symbol to define the parameters.

Let’s look at some examples now to see how this works…

How to Enable Autoplay

In step 5 above, you are given the video embed code that uses an IFrame to embed the video. The code should look as follows:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0″ allowfullscreen></iframe>

Now all you need to do to enable autoplay is to add the parameter “?autoplay=1″ to the end of the video URL in the embed code:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM?autoplay=1” frameborder=”0″ allowfullscreen></iframe>

The same modification to the Old Embed Code (AS3) will be as follows:

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/V3oJR5IAMxM?version=3&amp;hl=en_US”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/V3oJR5IAMxM?version=3&autoplay=1&amp;hl=en_US” type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

When you paste this code into any webpage or blog post, the video will now autoplay.

How to Start the Video at a Set Time

If you want to start the video 10 seconds into the video instead of right at the beginning, then you just add the parameter “?start=10″ to the end of the video URL in the embed code. The integer “10″ represents 10 seconds:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM??start=10” frameborder=”0″ allowfullscreen></iframe>

The same modification to the AS3 embed code would look like this:

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/V3oJR5IAMxM?version=3&amp;hl=en_US”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/V3oJR5IAMxM?version=3&start=10&amp;hl=en_US” type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

When you paste this code into any webpage or blog post, the video will now begin playing 10 seconds into the video when the viewer clicks the play button.

Now let’s look at an example that combines a few parameters at once.

How to Autoplay the Video and Loop the Playback Video Over and Over

Its important to note that the “loop” parameter needs to work together with the “playlist” parameter. This means that we are looping a playlist that has only one video. So the embed code will look like this:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/V3oJR5IAMxM?rel=0&autoplay=1&loop=1&playlist=V3oJR5IAMxM” frameborder=”0″ allowfullscreen></iframe>

The same modification in the AS3 embed code would look like this:

When you paste this code into any webpage or blog post, the video will now begin playing automatically and will loop over and over again (which is quite anoying really).

Now that you understand how to modify the various embed codes,  you can knock yourself out with all of the available parameters.

All Other Embed Code Parameters

There are many other parameters that can be used following the same principles outlined above. However, not all the parameters are universally compatible with the AS3 or HTML5 players. If a parameter is not compatible with the embedded player, it will just be ignored.

As good practice, I recommend using the only the newer IFrame embed codes and choosing parameters that are compatible with BOTH AS3 and HTML5 players.

The full list of configurable parameters and compatibility are as follows:

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

• If this parameter is set to 0, the video progress bar and the video player controls will be visible throughout the video.
• If this parameter is set to 1, then the video progress bar and the player controls will slide out of view a couple of seconds after the video starts playing. They will only reappear if the user moves her mouse over the video player or presses a key on her keyboard.

autoplay (AS3 & HTML 5)
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

cc_load_policy (AS3 Only)

Values: 1. Default is based on user preference. Setting to 1 will cause closed captions to be shown by default, even if the user has turned captions off.

color (AS3 Only)
This parameter specifies the color that will be used in the player’s video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player will use the color red in the video progress bar. See the YouTube API blog for more information about color options.

Note: This parameter is supported in the AS3 embedded player and in IFrame embeds that load the AS3 player. (IFrame embeds could also load the HTML5 player.) However, using the color parameter will disable the modestbranding option in the embedded player.

controls (AS3 & HTML5)
Values: 0 or 1. Default is 1. This parameter indicates whether the video player controls will display. If this parameter is set to 0, then the player controls will not display, causing the player to look like the chromeless player.

disablekb (AS3 Only)
Values: 0 or 1. Default is 0. Setting to 1 will disable the player keyboard controls. Keyboard controls are as follows:
Spacebar: Play / Pause
Arrow Left: Jump back 10% in the current video
Arrow Right: Jump ahead 10% in the current video
Arrow Up: Volume up
Arrow Down: Volume Down

enablejsapi (AS3 & HTML 5)
Values: 0 or 1. Default is 0. Setting this to 1 will enable the Javascript API. For more information on the Javascript API and how to use it, see the JavaScript API documentation.

fs (AS3 Only)
Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button in the embedded player and does not affect the chromeless player. The fullscreen option will not work if you load the YouTube player into another SWF. Note that you must include some extra arguments to your embed code for this to work. The bold text in the following example is required to enable fullscreen functionality:

<object width=”425″ height=”344″>
<param name=”movie” value=”http://www.youtube.com/v/u1zgFlCw8Aw?fs=1″</param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowScriptAccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/u1zgFlCw8Aw?fs=1″
type=”application/x-shockwave-flash”
allowfullscreen=”true”
allowscriptaccess=”always”
width=”425″ height=”344″>
</embed>
</object>

hd (Not Required)
Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default. This has no effect on the Chromeless Player. This also has no effect if an HD version of the video is not available. If you enable this option, keep in mind that users with a slower connection may have an sub-optimal experience unless they turn off HD. You should ensure your player is large enough to display the video in its native resolution.

Note: The AS3 player will automatically play the version of the video that is appropriate for your player’s size. If an HD version of a video is available in the AS3 player and that is the appropriate version for your player, then that is the version that will play.

iv_load_policy (AS3 Only)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotation to not be shown by default.

loop (AS3 & HTML5)
Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video.

Note: This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

modestbranding (AS3 Only)

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.

Note: This parameter is supported in the AS3 embedded player and in IFrame embeds that load the AS3 player. (IFrame embeds could also load the HTML5 player.)

origin (AS3 & HTML5)
This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the enablejsapi parameter value to 1, you should always specify your domain as the origin parameter value.

playerapiid (AS3 Only)
Value can be any alphanumeric string. This setting is used in conjunction with the JavaScript API. See the JavaScript API documentation for details.

playlist (AS3 & HTML5)
Value is a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.

rel (AS3 Only)
Values: 0 or 1. Default is 1. Sets whether the player should load related videos once playback of the initial video starts. Related videos are displayed in the “genie menu” when the menu button is pressed. The player search functionality will be disabled if rel is set to 0.

showinfo (AS3 Only)
Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and uploader before the video starts playing.

start (AS3 & HTML5)

Values: A positive integer. This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means sometimes the play head may seek to just before the requested time, usually no more than ~2 seconds.

theme (AS3 & HTML5)
This parameter indicates whether the embedded player will display player controls (like a ‘play’ button or volume control) within a dark or light control bar. Valid parameter values are dark and light, and, by default, the player will display player controls using the dark theme. See the YouTube API blog for more information about the dark and light themes.

 

Tags: autoplay, embed codes, loop, youtube