How-to Embed The Newer YouTube Video Player Skin and Why

How to Embed The Newer YouTube Video Player Skin and Why

Here's a little quick tip (of course I always say that just before writing 1000 words about it) that I discovered yesterday to show you how you can embed YouTube's newest version of their embeddable video player which more closely matches the newest player on YouTube. It is a much cleaner-looking player in my opinion and comes with one HUGE new feature - "watch later".

Here is an example of what the new player looks like when embedded outside YouTube:

Why Use YouTube's New Embeddable Player?

Aside from a refreshed look, if you ask me, there are a couple reasons why I like this player more and think you should consider using it.  BTW - I wont go into in this post but there are a lot more reasons for using this player if you are using the API as the player is based on AS3 vs AS2.  Anyway, here are some of the reasons I decided to use it on ReelSEO:

1) Watch Later Button

You'll notice that at the top right, there is a new button that says, "Watch Later." If a logged in YouTube user visits your page, they can add the video to their queue at YouTube such that they can watch the video at a later date and not have to remember how to find it. It will automatically be added to their playlist queue.  If a non-logged YouTube user visits your page, the watch button wont show.

That is pretty cool from a user perspective but here is another reason that I like this feature: It's a potential outside signal to YouTube that may one day be used to gauge interest, engagement, and popularity for the YouTube search algorithm. We already know that Google and Bing both using social signals in their search algorithms so it makes perfect sense to me that YouTube would do so as well.    In fact, some experts would say that YouTube is already looking outside for signals but what could be an easier way of doing that then tying a "watch now" feature directly into their player?

2) Right-Click Options

Though I doubt that too many people actually right click on the YouTube player, if they were to do so in the new player, they would see that new options exist to "copy video URL" (even at the specific time it's being watched - "copy video URL at current time") and "show video info." which were all non-existent in the older version.  Additionally, you'll notice that they moved these items along with "Copy embed html" higher up in the list for a better user experience.

How to Embed The Newer YouTube Video Player Skin and Why

3) Click to Pause vs. Visit YouTube

Lastly, and one of my favorite for site owners is that clicking within a video that is already playing doesn't open a new YouTube window containing all sorts of information that you may not be interested in. Instead, the click event just pauses the video as is typical with most other flash video players on the web.  They have added a little YouTube logo button at the bottom right that can be clicked on to visit the video's landing page on YouTube.

4) And Some Other Stuff

There are a few other changes worth mentioning.  First - they have made the CC (closed captions) button much more visible as part of the player bar at the bottom which is great for those that may be hearing impared.   Lastly, the end screen of the videos is a slightly cleaner design matching

How to Embed The New YouTube Embeddable Player?

OK, so how do you do this? Easy, just add "version=3" to the player's URL parameters.  For example, if YouTube gives you the following embed code:

<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/hJbTrMpw5JA?fs=1&amp;hl=en_US&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/hJbTrMpw5JA?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">
</embed></object>

Just add "&amp;version=3" to the end of both the param movie value and the embed src.

<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/hJbTrMpw5JA?fs=1&amp;hl=en_US&amp;rel=0&amp;version=3"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/hJbTrMpw5JA?fs=1&amp;hl=en_US&amp;rel=0&amp;version=3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">
</embed></object>

And that's it for my "quick tip." I hope you enjoy and if you want to see all sorts of additional ways you can customize YouTube player embeds, read our post - How To Customize YouTube Player Embeds – Tips And Tricks.

Don't Miss Any Stories!

Get daily online video news, tips and trends via email!

SEE ALSO Related Stories ▼
Posted in Youtube Marketing
About the Author -
Mark Robertson is the Founder and Publisher of ReelSEO, an online information resource dedicated to the fusion of video, technology, social media, search, and internet marketing. He is a YouTube Certified, video marketing consultant and video marketing expert, popular speaker, and considered to be a passionate leader within the online video and search marketing industries. View All Posts By -

What do you think? ▼
↑ Top