The Advanced Guide to Embedding Youtube Videos (Google Should Have Created)

We share Youtube videos all.the.time. When done wisely, embedding Youtube videos may help you a lot with reader engagement and leads.

But how much do we really know about embedding Youtube videos? Is it just this?

Share -> Embed – [Grab the code]

Some content management systems now allow easy Youtube embeds (all you need is copy-paste the video URL on Youtube). These CMSs include WordPress and Wix, so it is a good idea to use either of those. Here are a Wix discount for you to make it more affordable!

Well, the truth is, you can get much more creative than that! Here’s the indepth Youtube embedding guide Google should have created long ago!

1. Embed Code and Parameters

Since 2009 YouTube has supported a new HTML5-friendly player that works via iFrame.

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?rel=0″ frameborder=”0″ allowfullscreen></iframe>

Surprisingly, the player has a few fun options (which Youtube default interface chooses to ignore probably in the fear that the users will play too much). Here’s what you can do with the iFrame player:

Color of the player: colors and themes

The player supports two themes: dark and light as well two colors: red and white.

  • Theme = the color of the controls bar;
  • Color = the color of the time tracker:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?theme=light&color=red” frameborder=”0″ allowfullscreen></iframe>

This will result in this:

theme=light&color=red

If you change it to theme=dark&color=red:

theme=light&color=red

theme=dark&color=white

theme=dark&color=white

theme=light&color=red

theme=light&color=red

Get rid of controls (Minimalist style)

Alternatively you can even remove the controls and the bar:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?controls=0” frameborder=”0″ allowfullscreen></iframe>

Even MORE Minimalist

With ?showinfo=0 parameter you can also hide the info from above the player (so use both ?showinfo=0 and controls=0 for the complete minimalist feel!)

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?controls=0&showinfo=0” frameborder=”0″ allowfullscreen></iframe>

Before: After: [Minimalist-style!]
Before Minimalist

Player behavior: Auto-play, related videos and loop

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?autoplay=1&rel=0&loop=1” frameborder=”0″ allowfullscreen></iframe>

The above code will:

  • Autoplay the video once the page loads
  • Remove related videos at the end of the video (Recommended in most cases)
  • Loop the video: It will re-play itself automatically until the user stops or closes the page

Hide Youtube logo

Yes! You can do that!

Before:

Youtube

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?modestbranding=1” frameborder=”0″ allowfullscreen></iframe>

After:

Youtube

Note: Some sites will reject iframe embed code, so using an old embedded player is a good solution.

2. Enrich Your Videos: Schema.org

While Google has partially cut video rich snippets off from SERPs, I’d still recommend adding schema markup whenever you use a video. Google is introducing lots of experiments: There’s still a good chance they will pick the videos back up. Or this will come handy in Bing. Or this will give search engines a clear idea you are using rich media on your pages (and thus send a good quality signal to the crawler)

I’ve listed some must-use Schema tricks for content marketers here. Matt Cutts says schema should be used on-site even for Youtube videos if you embed them into your page.

Here’s a quick HTML template to help you with /VideoObject Schema.org Markup.

<div itemscope itemtype=”http://schema.org/VideoObject”>

<h2>Video: <span itemprop=”name”>YOUR VIDEO NAME</span></h2>

<meta itemprop=”duration” content=”T1M42S” />

<meta itemprop=”thumbnailURL” content=”CREATE-AND-LINK-AN-ENTICING-THUMBNAIL.JPG” />

<meta itemprop=”embedURL” content=”VIDEO URL GOES HERE” />

<iframe>YOUR VIDEO EMBED CODE WE DISCUSSED ABOVE GOES HERE</iframe>

<span itemprop=”description”>YOUR VIDEO DESCRIPTION GOES HERE</span>

<!– Optional: Add information about the video publisher / copyright holder here –>

<div itemprop=”copyrightHolder” itemscope itemtype=”http://schema.org/Organization”>

<meta itemprop=”description” content=”TELL A FEW WORDS ABOUT YOUR ORGANIZATION HERE“>

<a itemprop=”url” href=”YOUR ORGANIZATION URL” rel=”author”><span itemprop=”name” style=”display:block;”><strong>YOUR ORGANIZATION NAME</strong></span></a></div>

</div>

T1M42S = 1 minute 42 seconds long. That’s how Google knows how long the video is to show that in SERPs:

Video schema

Don’t forget to check if Google is able to read your markup here.

Bonus: How to Embed YouTube Videos in PowerPoint, Forum Thread and Gmail

Apart from the standard HTML code you may be dealing with daily, you are likely to come across other types of pages and documents to embed a YouTube video in:

Embed Youtube Videos in Presentations

There are a few ways to embed a YouTube video into a PowerPoint presentation (just make sure it runs in the client you are going to play the presentation in):

  • For earlier versions (97 or later): Download the YouTube Video Add-in to add a new “Insert YouTube Video command to your PowerPoint Toolbar. With it, you will only need to provide your video URL and follow the wizard steps.
  • Starting from Office 2010 you do not need any external tools: Click the Insert tab in PowerPoint and navigate Video -> Insert Video from Website. There, insert your video embed code and customize the settings.

Note: There’s no way to embed a Youtube video into a Keynote presentation unless you download the video from Youtube and convert it into QuickTime format.

Additionally, you can:

  • Embed Youtube videos into Google presentations (tutorial)
  • Embed Youtube videos into Slideshare uploads (tutorial)

Embed Youtube Videos in a Forum Thread

You can also embed video using standard BBCode,which you’ll find in most forums.

[youtube]Video-ID[/youtube]

Note: In order for this code to work, the forum owner must have first created the BBCode (which I recommend for all the forum owners).

WebHostingGeeks list even more embedding and marketing Youtube ideas, so definiteky check those out!

Have I missed anything important in this guide? What else should we know about embedding YouTube videos?

2 COMMENTS

  1. Damn, Ann, but this is an awesome piece – I love the minimalist option, as I’ve always preferred the way Vimeo presents video. I’ll probably still use them for the majority of my video embeds, but this is a great incentive to use YouTube a little more.

    Cheers!

Leave a Reply to Ann Smarty Cancel reply

Please enter your comment!
Please enter your name here