Patrick Galbraith

Web developer - Adelaide, Australia

Bookmarklet – Force Youtube HTML5 Embed

Here is a simple JavaScript bookmarklet that replaces YouTube videos embedded using the old flash object embed method with the new iframe embed method. What this means is that you can force a lot of embeded YouTube videos to play with the HTML5 video player. This is particularly useful on IOS devices (iPhone, iPad) with the YouTube app disabled.

Installation (iPad)

  1. Add this page as a bookmark
  2. Select and copy the Javascript in the textarea below.
  3. Go to your bookmarks and tap “edit”. Then tap the new bookmark you just made of this page.
  4. Edit the name and paste the Javascript in the field for the URL.
  5. Click done.

Source code with formatting

javascript:(function(){
	var objectTags = document.getElementsByTagName('object');
	var objectTagsArr = new Array();
	
	for (var i = 0; i < objectTags.length; i++) {
		objectTagsArr[i] = objectTags[i];
	}
	
	for (i = 0; i < objectTagsArr.length; i++) {
		var objectTag = objectTagsArr[i];
		if(objectTag.data.indexOf('http://www.youtube.com/') >= 0) {
			var youtubeID = objectTag.data.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^'&?\/ ]{11})/i)[1];
			
			var newIframeElem = document.createElement('iframe');
			newIframeElem.class = 'youtube-player';
			newIframeElem.type = 'text/html';
			newIframeElem.width = 640;
			newIframeElem.height = 385;
			newIframeElem.src = 'http://www.youtube.com/embed/'+youtubeID;
			newIframeElem.frameborder = 0;
			
			objectTag.parentNode.replaceChild(newIframeElem, objectTag);
		}
	}
})();

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>