If you have a blog, you are likely to have already embedded YouTube videos plenty of times. But are you sure you know EVERYTHING about making the most of the YouTube embed code? Even if you consider yourself a YouTube pro, you are likely to find something new in this post. Wanna bet?
What is this guide going to be about? Let’s see:
- Standard (“Classic”) YouTube Embedded Player: the embedded player we are all used to plus what we didn’t know about it.
- New HTML5-Friendly Embed Code: still in beta but already worth looking at.
- How to Embed YouTube Videos in PowerPoint, Forum Thread and Gmail
1. Standard (“Classic”) YouTube Embedded Player
YouTube Embedded Player Options
The standard YouTube player is what you have been using for ages. Recently, YouTube introduced new player options that allow you to customize some important parameters:
- Color and size (you have always been able to customize the color palette and size, but now you have user-friendly tools to do that including the “Customized” size option)
- Related videos (if you want your website visitors to see “related videos” after yours ends)
- Privacy-enhanced mode (if you want YouTube to collect “cookies” in order to collect information about the embedded video viewers)
- The options to include a frame and play in HD
Useful YouTube Embedded Player Parameters
Apart from what YouTube allows you to customize via its web interface, there are other ways to customize how your video will be displayed in the embedded player:
| Player Parameter | Description | Example and explanation (if needed) |
| start=Seconds | Link to the most interesting part in a video: This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. | start=300 (skip first 300 seconds of the video) |
 |
||
| autoplay=0 (default) OR autoplay=1 | Set whether or not the initial video will autoplay when the player loads. | autoplay=1 will cause the video to play without the visitor to push “Play” button |
 |
||
| loop=0 (default) OR loop=1 | loop=1 makes the video start again without user intervention after it reaches the end. | |
 |
||
If you’re interested, here’s the full list of Youtube player parameters.
YouTube Embedded Player Trick: Add a Clickable Link In the Videos (Without Using Annotations)
LinkedTube is a fun tool that lets you add links and other sharing options to the standard YouTube video player (note – the result is a flash player, so not always very user-friendly):
- Specify your YouTube video unique ID or just copy-paste the full URL
- Set the linked button text
- Set the URL that the button should link to
- Set the button options (“Show Always” or “Show on Hover”)
- Set the Hover title
- Set the Hover text
See it in action. Check out the two videos below: one of them includes the LinkedTube embedded code:
New HTML5-Friendly Embed Code
In July, YouTube announced the introduction of a new HTML5-friendly player that works via iFrame.
<iframe class=”youtube-player” type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0″>
</iframe>
The player has a few noticeable advantages from the usability perspective – mainly, that more people can now watch the embedded videos. In fact, viewers are able to watch embedded video in either Flash or HTML5 players (provided they have signed up for the beta version and use an HTML5-compatible browser). In instances where HTML5 isn’t supported, Flash is used.
Another minor usability difference is how the player treats the mouse click. Clicking on the new embedded player doesn’t bring you to the YouTube page but plays / pauses the video (you only get to the YouTube page if you click on the watermark).
The bad thing is that WordPress Rich Editor is a pain when it comes to treating iFrame but you can use some plugins like this one to make your life easier.
With the new player you are not able to use the player parameters above but it doesn’t mean you have no toys to play with:
| Player Parameter | Description | Example and explanation (if needed) |
| #t=XmYs | Link your viewers to the most interesting part of the video: Make your video play starting from X minutes and Y seconds | #t=2m20s added to the end of the source URL within the iFrame will cause the video to play starting from 2 minutes and 20 seconds |
 |
||
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 PowerPoint
- Embed Youtube Videos in a Forum Thread
- Embed Youtube Videos in Gmail
Embed Youtube Videos in PowerPoint
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):
- 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.
- With 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.
Embed Youtube Videos in a Forum Thread
You can also embed video using standard BBCode,which you’ll find in most forums.
You can find your video ID in its URL:
In order for this code to work, the forum owner must have first created the BBCode (which I recommend for all the forum owners):
- Go to Custom BB Codes and click Add new BB Code
- Title it as “YouTube” and provide the following replacement:
<object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/{param}”></param><embed src=”http://www.youtube.com/v/{param}” type=”application/x-shockwave-flash” width=”425″ height=”350″></embed></object>
While this is called embedding by many people, in reality this is just the way Gmail displays a link to a YouTube video that someone sends you via email. Originally a Gmail lab feature, this was announced as the default feature in February (which means Gmail embeds the video by default, you don’t need to do anything extra).
Just email someone a link to a YouTube video and if your recipient uses the Gmail web interface, they will see a video preview attached to your email.
Instead of having to click on the link and wait for a new window to load before you can watch the video, Gmail now shows YouTube previews right below the message. All you have to do is click the play button and enjoy.
Have I missed anything important in this guide? What else should we know about embedding YouTube videos?
If you want useful tutorials delivered to you regularly, like our Facebook page and follow us on Twitter!
Great Post!
Another very useful parameter for anyone wishing to embed their youtube videos is “&rel=0″, which prevents the video from displaying similar videos at the end of your own video. Highly recommended for anyone not already using it, since it basically ensures competitors are not getting free advertising at your expense, and helps to keep visitors on your site, instead of clicking away to somewhere else.
Thanks for the handy iframe plugin reference… I was running into issues with this on my own wordpress sites, so I will definitely give it a shot.
Thanks for the comment!
Yes, I was aware of the parameter but didn’t include it since the new Youtube interface lets you disable related videos now. So you can do that either way!
Thanks for the tip about the iframe embed plugin Ann. I’ve had a few problems recently with WordPress not accepting the new iframe embed codes so I went back to using the old code instead. Hopefully this plugin will help me to be able to use the new codes in the future (although considering the current lack of customization options with the new code, I may just stick with the old one for the time being).
Do you know if the iframe plugin works with Vimeo’s new embed codes as well?
I hope it will turn useful
Does Vimeo uses iFrame code as well? If yes, it should work as well.
Great tuturial Ann.
One additional parameter allows you to deeplink to a video and begin playback at a specific time.
#t=10m08s
append this to the URL:
youtube.com/watch?v=aaaw3azfZWI#t=1m58s
Hey there, I did mention the parameter though
This is very cool and very powerful if combined with YouTube Insights.
Combat viewer drop off by seeing where viewers perk up and really focus via the Audience Attention report and change the player param to start just before that !
Is &autoplay=1 broken now ? it used to work fine for years but no it seems Youtube has broken this very popular parameter used and needed by many webmasters.
Does anyone know a work around to get a popup full screen youtube clip to auto play ???
Now that &autoplay=1 no longer works
example to get the following video to auto play >> http://www.youtube.com/watch_popup?v=AEslC1GA-O4
Great article, artworks and details. I was aware of the parameter. But, I didn’t know that you could embed you into your gmail. Thanks for sharing.
Hi I am new and learning as much as i can. I need to know how to add the api utube code on my siteso people have full access to utube watch upload and search to get peoples attention and let friends n family use our site for every day use. Please help with the Embdded code to use
Great info and easy to understand.
I want to run a playlist – ideally with the new iframe code. I am hoping there is a way to display the thumbnails (genie?) of a playlist BEFORE the first video has played.
Does anyone knows how to add a shuffle to an embedded YouTube playlist? I’ve tried shuffle=1 but does not work.
These tutorials are very nice but I was wondering, is it possible to embed a youtube video to Your site and when a user clicks the Youtube video it doesn’t redirect to Youtube?
In other words, when some clicks on Your embeded video, it just pauses and not jump to the Youtube mother site where the original video is.
Hey Jonathan, this is only possible with new HTML5-friendly – so you may want to stick to it
The comments above are some of the questions about this tutorial, its great stuff, I am trying it, hope everything run smoothly………..