Simple embedding techniques

The simplest way to embed a youtube video on a web page is to use youtubes default iframe embed code. The problem with this however is that it gives you no control over the video itself as the iframe points to the video player on the youtube site rather than one on your own site.

Another option is to use Youtube's old embed code method which uses Adobes default flash embed code. While this gives you more options, it still does not give you access to youtube's powerful javascript API.

If you wish to do more than simply embed a default player on a web page, you will need to either use the Javascript API with the swfobject, or use the new Javascript iFrame API.

IFrame API (the new way)

Javascript controls for video play back and css resizing

Play Pause Jump to middle Resize video

The new IFrame API is Youtubes current recommended method of embedding videos on a webpage. The main difference between this method and the swfobject is that swfobject and related code is all encapsulated within an IFrame and controlled by YouTube. The advantage being that rather than doing it yourself, you are handing the ever changing, cross-platform issues over to YouTube to solve.

You access the IFrame player via events and the initial IFrame constructor and the allow YouTube to decide whether it is best to serve a flash player or an HTML5 player.

HTML

<div id="container"> <div id="iframe"> // no fall back needed. YouTube will add its own fall back </div> </div>

Javascript

This code loads the IFrame Player API code asynchronously.

var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

This function creates an <iframe> (and YouTube player) after the API code downloads.

var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '100%', width: '100%', videoId: VIDEOID, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }

The API will call this function when the video player is ready.

function onPlayerReady(event) { event.target.playVideo(); }

The API will call this function when the video player state changes.

function onPlayerStateChange(e) { // build your state engine and controls here console.log(e.data) }

CSS

#iframe { width:100%; height:100%; } #container { width:512px; height:288px; }

Optimised embedding techniques

Adding lots of flash or video on a web page can cause performance issues on older browers, older computers, or on some mobile devices. A more optimised approach therefore could be to only embed the video players on demand rather than on page load. This could be only when the video is visible on the screen or when a button or image is clicked.

Try this one!

Javascript API, swfobject and an html5 fallback (the old way)

Javascript controls for video play back and css resizing

Play Pause +30s -30s Resize video

The swfobject is a great javascript tool which checks for flash support and only embeds the flash object if the browser has the correct version of flash installed. This makes it easy to progressively enhance or gracefully degrade websites by adding the appropriate enhancements or fall-backs.

Lets start with the markup:

HTML

<div id="container"> <div id="flashobject"> // add fall back code here </div> </div>

If the correct version of flash is detected, the swfobject will replace the #flashobject div with youtubes flash video player. Otherwise the fall-back markup will remain on the page.

Fall back to Youtube's iframe

<iframe width="100%" height="100%" src="http://www.youtube.com/embed/VIDEOID" frameborder="0" allowfullscreen></iframe>

In this example I have used youtube's iframe embed code as a fall back, which itself falls back to an html5 player if the correct version of flash is not detected.

The dimensions should be 100% by 100% so that the video size can be controlled externally via css or javascript.

The VIDEOID needs to be replaced by the actual video ID which can be found inside the video url or embed code, ie YE7VzlLtp-4.

Javascript

var params = { allowScriptAccess: "always" }; var atts = { }; swfobject.embedSWF("http://www.youtube.com/e/VIDEOID?enablejsapi=1&playerapiid=ytplayer&version=3", "flashobject", "100%", "100%", "9.0.115", null, null, params, atts);

As with the HTML, the VIDEOID needs to be replaced by the actual video ID, and the dimensions should be 100% by 100% so that the video size can be controlled.

The flash version should be 9.0.115, as this release of the flash player was the first to include support for the H.264 codec which subsquently transformed the way we view video on the internet (ie youtube).

CSS

#flashobject { width:100%; height:100%; } #container { width:512px; height:288px; }

Once the #flashobject is replaced by the swfobject it cannot be controlled consistantly cross-browser via css, so the #flashobject is given the width and height of 100% and placed inside a #container of which you can control.

Making the video players responsive with css

Adding media queries targeting the #container will scale the video player for the correct browser window size.

CSS

@media screen and (max-width: 680px) { #container { width:512px; height:288px; } } @media screen and (max-width: 560px) { #container { width:360px; height:202px; } } @media screen and (max-width: 410px) { #container { width:180px; height:100px; } }

This example makes the assumption that your target video is 16:9 (widescreen), the default and standard aspect ratio for internet video. To create other dimensions use the following formula:

video width / ( aspect ratio ) = video height

ie:

512/(16/9) = 288

Making the video players responsive with javascript

By using media queries you can incrementally adjust the width and height to scale the video player proportionally. However If you wish to resize the video player to any given width then you'll need to use javascript rather than css to calculate the height.

You do this inside a resize method:

Javascript

var apectRatio = 16/9; var container = document.getElementById("container"); window.onresize = function(event) { container.style.height = Math.round(container.width / apectRatio); }

Or if you prefer to use jQuery...

Jquery

var apectRatio = 16/9; $container = $('#container'); $(window).resize(function(){ $container.height($container.width() / apectRatio); }