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]
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:
If you change it to theme=dark&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>
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!
<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/VIDEO-ID?modestbranding=1” frameborder=”0″ allowfullscreen></iframe>
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)
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>
T1M42S = 1 minute 42 seconds long. That’s how Google knows how long the video is to show that in SERPs:
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.
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).
Have I missed anything important in this guide? What else should we know about embedding YouTube videos?