Videoture 30 Second Web Video PDF to Video Custom Video Products Aerial Video Solutions Sitemap Contact

Videoture: How our Youtube embed code produces a great looking web page

By: Richard Hart
richardhart.com

One of the more popular questions and requests from our customers we get here at Videoture, is how they can make their Youtube video embeds look and act like the ones they see on our web site. Of course the code samples are right on the web page, but I thought I'd take a minute abreak it down step-by-step for everyone, and try to clear up the ambiguity and make the process a little more straightforward.

First, when we embed a Youtube video (whether it is our own or someone else's), we verify that the "start splash" or the image that Youtube conveys for the video as the default "image" is in keeping with the spirit, color theme, and overall design intent of the page. If it is - then, no problem. If I don't like what I see, I then create a new thumbnail at youtube and post it there (if the video is ours). If the video belongs to a customer or supplier (and I can't control the "start splash" image), I then often create a video splash of my own to supercede the video or video playlist I am planning on showing. This can be a small advertisement, or a contextual message about what I want my viewers to understand from what they are about to view. Always keeping in mind, that brevity is of the essence. A 10 second video introduction spot is very long in a viewers mind.

So let me summarize so far: If the start splash is acceptable - I proceed without modification. If the start spalsh is not good, I create another video to prceded it. I now have a playlist to show, and not just a single video.

So now assuming all the videos are uploaded, and ready to go, I determine the size of the video for the web page intended. You are not obligated to use Youtube default sizes, but you should keep the dimensionality of the video ins scale with the original video upload. For instance: if you uploaded a 1920X1080 HD video, and you wanted a smaller embed, you should scale the height and width dimesnsions of the new embed to be proportional to the original video. The custom embed size maker at Youtube always does this just fine. And, this is where we get our default or starting embed code for our Youtube embed work.

Here is a sample of what that Youtube default video embed output looks like sized to 1280x720:
<iframe width="1280" height="720" src="//www.youtube.com/embed/videoseries?list=PL-fo4GkdZ_Hgi4rP0fzXknAWLQctIH0qR" frameborder="0" allowfullscreen></iframe>

Here is a sample of the code that was used to produce the Youtube web video collage on this page player:
<iframe width="1100" height="619" src="http://www.youtube.com/embed/videoseries?list=PL-fo4GkdZ_HgWb3tFy0FSlnaVFARZSJm9&rel=0&vq=hd720&autohide=1&modestbranding=1&showinfo=0&controls=1&wmode=transparent" allowfullscreen="" frameborder="0"></iframe>

The next phase of the embed job requires what additional design elements your whis to use for your web page. Here is a list of the common embed options that currently work at Youtube as of Febuary, 2014:

autohide

(supported players: AS3, AS2, HTML5)
Values: 2 (default), 1, and 0. This Youtube embed 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.

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.

If this parameter is set to 0, the video progress bar and the video player controls will be visible throughout the video and in fullscreen.

autoplay

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

allowfullscreen

This function determines whether your viewers can get a full screen viewing of you web video. The default is (" ") - blank. Which allows it. A "0"turns the capability off.

color

(supported players: AS3, HTML5)
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: Setting the color parameter to white will disable the modestbranding option.

controls

(supported players: AS3, HTML5)
Values: 0, 1, or 2. Default is 1. This parameter indicates whether the video player controls will display. For IFrame embeds that load a Flash player, it also defines when the controls display in the player as well as when the player will load:
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.

Note: The parameter values 1 and 2 are intended to provide an identical user experience, but controls=2 provides a performance improvement over controls=1 for IFrame embeds. Currently, the two values still produce some visual differences in the player, such as the video title's font size. However, when the difference between the two values becomes completely transparent to the user, the default parameter value may change from 1 to 2.

frameborder

Determines the width of the frameborder "framing the Iframe itself. The default is ("0") or 0 pixels width.

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

This Youtube embe parameter indicates whether the player should show related videos when playback of the initial video ends. The default (or rel= "1" )shows related videos. The alternative is (rel="0"), which returns the video back to the beginning splash image on completion. Keep in mind rel can be superceded by the loop cammand.

showinfo

Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.

If the player is loading a playlist, and you explicitly set the parameter value to 1, then, upon loading, the player will also display thumbnail images for the videos in the playlist. Note that this functionality is only supported for the AS3 player since that is the only player that can load a playlist.

vq

This Youtube embed parameter controls the video quality. The options are 144p, 240p, 360p, 480p, 720p, and 1080p. 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 a sub-optimal experience unless they turn off HD. You should ensure your player is large enough to display the video in its native resolution.

Here some samples of how the embed code might be used: (vq=720hd, vq=480p, vq=1, vq=0, vq=1080hd)

wmode

Defined as "Window Mode" Possible values: window, opaque, transparent. Sets the Window Mode property of the Youtube Video for transparency, layering, and positioning in the browser. window – movie plays in its own rectangular window on a web page. opaque – the movie hides everything on the page behind it. transparent – the background of the HTML page shows through all transparent portions of the movie. This option can slow animation performance

If you want more information on Youtube embed codes, you may want to reference the Youtube Embedded Players and Player Parameters Page at Google.