How To Customize And Embed A Youtube Video

If you want to embed Youtube videos on your website, there are more options available then shown on the standard Youtube video page.

Here is the tool that will do it YOUTUBE EMBED TOOL

youtube default embed

These default youtube embed player options are a good start.

As of this writing … things change, you know – Youtube gives you the option to:

  1. Show suggested videos when the video finishes – rel=1 instead of the rel=0 query string parameter.  In general, if I am embedding a Youtube video on a website of mine, I do NOT want to show related videos at the end of my Youtube video.  No sense in distracting my visitors.
  2. Use HTTPS – think SSL (secure sockets layer).  Or think encryption and the different color in the url area of your browser.  This is useful if you are embedding Youtube videos on sites that offer HTTPS support to prevent browsers from throwing a “mixed content” warning if not all items on the page are secure.  Facebook is one such site.  It doesn’t hurt to enable this if you are not sure whether the page you plan to embed your Youtube video on is secure or not (most are not secure).
  3. Enable privacy-enhanced mode – this has to do with the use of cookies.  Google is all about collecting data – and cookies are one way of collecting data.  If you toogle this option, the embed code will change the url from youtube.com to youtube-nocookie.com.  Don’t be fooled into thinking that Google won’t set some cookies.  This option restricts YouTube’s ability to set cookies for a user who views a web page that contains a privacy-enhanced YouTube embed video player, but does not click on the video to begin playback. YouTube may still set cookies on the user’s computer once the visitor clicks on the YouTube video player, but YouTube will not store personally-identifiable cookie information for playbacks of embedded videos using the privacy-enhanced mode. Note that Google may set a cookie if the visitor actually clicks on the Youtube player.  I would replace the word may with will.  I don’t know that for sure, however if I was a betting man …
  4. Use old embed code – the code that includes “object”, “param”, “value”.  Right now I can’t think of a very good reason why the current iframe option won’t be the best choice.  Maybe it is available for legacy reasons.
  5. Change the sizing of the video – this option will keep the video’s width-to-height ratio constant.  What if you want to actually force the exact dimensions?

There Are Many More Youtube Embed Options

Have you seen this Youtube Embedded Player Parameters page?

If so, do you know what to do with all that information like autohide, autoplay, cc_load_policy, egm, iv_load_policy, modestbranding (this is one of the best features, in my humble opinion), rel, start?

Google does provide a straightforward explanation of how to embed a Youtube video.

However, if you want to take advantage of the parameters for customized players, you are kind of on your own.

Until now.

Youtube Embed Player Parameters

Using the Youtube embed player parameters builder here, you can customize your Youtube video prior to embedding on a web page to get the impact you want.

youtube embed player parametersBesides the default options that Youtube allows you to change easily, the Youtube embed player parameters builder lets you:

  • HD – play the video in high definition if available.
  • Autoplay – the video will start to play when the player loads, the visitor does nothing.  Kind of an obnoxious intrusion, however …
  • Close Caption – you can show close captions (assuming they are available) even if the user has turned captions off
  • Disable video controls – selecting this will make the video appear to be a “chromeless player”.  The only thing a visitor will be able to do is stop and start.  This option combined with the very cool modestbranding and the obnoxious autoplay give you a lot of control over the visitor’s viewing experience.
  • Keyboard controls – did you know you can control the video play via your keyword?  I didn’t.  By default, a visitor has keyboard control which includes play / pause (spacebar), jumping +/-10% forward or backward (right arrow / left arrow) and turning the volume up or down (arrow up / arrow down)
  • Enhanced Genie Menu – don’t freak out, not thinking of I Dream Of Genie and Barbara Eden here.  This is Google we are talking about.  By default the genie is in the bottle (off).  When on, the genie menu (if present) appears when the mouse goes over the video versus when the menu button is pressed.  Can’t seem to find any information beyond this to explain what the heck the genie does.
  • Hide annotations – default is to show annotations, again, assuming they are available.
  • Loop – what you think it is.  Have the video repeat once complete.
  • Modest Branding – my new favorite feature.  It strips away most of the Youtube logo stuff from the video.  There will still be a small label  when the mouse is over the video.  In general, you won’t see any Youtube logo while the video is playing.  Combining this option with hiding the video controls makes it look like you have your own private video.  By default this option is NOT turned on.
  • Show info – show the video title and uploader before the video actually starts playing.
  • Show search – shows a search box when the video is minimized.  This option is overrided if you have disabled related videos (first option – “Show suggested videos when the video finishes”)
  • Video size – as far as I can tell, Youtube videos are sized at a width-to-height ratio of either 4:3 or 16:9.  You have the option of keeping the current size, selecting one of three other sizes or a customize size.  Regarding the customize size, you can size it however you want.  That doesn’t mean it will look great or that it will actually play.  If you go with the customize option, I would make an effort to keep the width-to-height ratio close to 4:3 or 16:9.
  • Autohide video controls – what happens with the video controls once the video starts playing.  The default is for the controls to to fade out.  You can force the controls to remain visible throughout if you choose.
  • Start – another cool little feature that has been around for awhile.  Gives you the ability to specify at what point in the video you want it to start playing.  Once you place the embed code in your html, the video will play at the given start time.  You provide the hour, minutes, and seconds.
  • Theme – light or dark.  Default is dark for the display player controls.

Let me spoil the party – these are not every single option.  As it is right now, the Youtube embed player parameter builder doesn’t accept playlists, enable the Javascript API, or muck around with the colors.

A Real Live Example

Go grab the embed code for a Youtube video.

Try this one, http://www.youtube.com/watch?v=ED5WMCs_bzI (it will open in a new window).

Click the Share button below the video.

Click the Embed button just below that.

Copy the embed code, looks like this …

youtube embed optimizepress

Here’s what I did for a video I did for Optimizepress that has been customized to play in HD (it won’t since I didn’t make it in HD, but hey, it is fun to click that option), disable video controls (only thing you can do is start/stop the video), hide annotations (again this won’t do anything since I didn’t add any annotations), use the uber-cool modest branding option to hide most of the Youtube info, change the size to 480 x 360 pixels, and start the video at the 10 second mark when you click to play.

youtube embed code options

And the actual video.

Now go use the Youtube Embed Player Parameters builder.

P.S. – Want to get the skinny on Youtube? Sign up for YouTube Mastery.

P.S.S. – Update: here’s a Youtube video – customized, of course – showing how to use the Youtube Embed tool.

{ 1 comment… read it below or add one }

Mary Kathan

Great info here – I appreciate the You Tube tips!

Thanks for posting it over at Tiffany’s blog too….

Mary

Leave a Comment

Previous post:

Next post: