Sharing YouTube videos has grown to become a National pass-time. Every time I visit my parents they have some videos that they came across on a website. My mom likes the cute animals while my dad can’t get enough of auto racing. Hey, I’m not judging; I’ve been known to post videos on my own website. While doing so, I discovered that there are a whole lot of options that you can set to control the appearance and even the behavior of your videos. It all begins by selecting the embedding method. In today’s article, we’ll explore how to select amongst several different video players to customize your embedded YouTube videos.
Embedding Videos within an IFrame
If I were to guess, I would suspect that the vast majority of people discovered YouTube embedding on the sharing links located underneath each video:
That form creates the HTML markup for an iFrame element whose src attribute is set to the selected video. When the target page is opened in the browser, it uses whatever player is configured in the user settings – typically Adobe Flash player.
<iframe width="420" height="315" src="//www.youtube.com/embed/atI4JKFQYoU" frameborder="0" allowfullscreen></iframe>
HTML5 Video
Recently, YouTube launched an HTML5 video trial. The HTML5 player allows users to view videos using the h.264 video codec and WebM formats (the latter uses the VP8 codec). Moreover, it supports all the features of the Flash player, including ads and encrypted streams. The HTML5 player is available for most major browsers and is enabled by default in Chrome.
There are a couple of ways that you can check whether or not you are currently using the HTML5 player. One is to go to the YouTube HTML5 page. At the bottom of the page, you’ll either see the message “The HTML5 player is currently used when possible” or “The default player is currently used.” In most browsers, Chrome notwithstanding, you can click “request the HTML5 player” to enable it.
A really quick way to see what player you are using is to simply right-click on a video. That should bring up a popup menu that provides information about the player, usually in the form of an “About the xxx player menu item:
The HTML5 player is a great choice for those of you who like to be on the cutting edge of technology. Just bear in mind that there are some factors to consider. For instance, videos may only be as large as the browser. Hence, a video can only occupy the entire screen if the browser itself supports full screen.
IFrame Player API
For more granular control over YouTube video playback, the IFrame Player API uses JavaScript to embed a video. It still presents the content within an iFrame, but with a lot more flexibility. For instance, you can serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash, queue videos for playback, play, pause, or stop videos, adjust the volume, as well as retrieve information about the video being played. You can also add functions to respond to certain player events, such as a player state change or a video playback quality change. You can even build your own player controls if you like!
The HTML and JavaScript code below shows a simple example that programmatically embeds the above barracuda video:
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '258',
width: '422',
videoId: 'atI4JKFQYoU'
});
}
The first part of the code dynamically loads the Player API JavaScript as the first script in the page. The onYouTubePlayerAPIReady() function is called automatically when the IFrame Player API code has loaded. It’s basically a predefined event handler.
Going Old School with Object Embedding
Back in the early days of Web video, the <OBJECT> tag was the defacto standard for embedding video content. Its use has largely been eclipsed by the <IFRAME>. As mentioned earlier, the iFrame is usually a better choice because it lets the browser determine what software (player) to use. Take a look at the object code below, and you’ll see that it specifically asks for a shockwave-flash player. If you don’t have flash installed, as in the case of Chrome, you’ll get an empty box to stare at! That being said, there may be some special cases where you want to force the use of flash.
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/atI4JKFQYoU"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/atI4JKFQYoU"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="422" height="258"></embed>
</object>
Conclusion
Being a control enthusiast, I tend to favor the programmatic approach over a declarative one, unless the latter can offer me a lot of versatility. It turns out that YouTube’s Player Parameters are more than up to the task. In my next article, I’m going to cover the myriad of Player Parameters that can be set for every player type.
