Friday, May 22, 2009

Embedding YouTube Videos on Secure Web Sites.

Currently YouTube doesn't offer an option of embedding its videos via https, so if you try to add a video to a secure page browsers will display a security warning. If you use swfobject.js instead of the code provided by YouTube (as you should!), you'll find the security warning goes away ... in some browsers; IE is fooled and doesn't display a warning, while FireFox will still show its little red exclamation mark in the status bar indicating that not all elements on the page are secure:



The same issue occurs in Opera, as well as Flock and other Mozilla browsers.


And obviously, since swfobject is a JavaScript file, if JavaScript is disabled in the browser the only option for showing the video is a plain ol' Flash object inside noscript tags, and in that case the security warning is displayed for all browsers.


The workaround I came up with is to upload a SWF to the secure site that acts as a proxy and loads the YouTube video (since Flash has its own security model, it doesn't matter that the video is not served via https).


Here is an example from peta2's "Whose Skin Are You In?" Web site:


peta2's "Whose Skin Are You In" video


I've posted the SWF I created to Google Code at http://code.google.com/p/ytplayer.


Here's the ActionScript that makes it all work:


Stage.align="TL";

Stage.scaleMode="noscale";


System.security.allowDomain("http://www.youtube.com");

System.security.loadPolicyFile("http://www.youtube.com/crossdomain.xml");


//create a MovieClip to load the player into

ytplayer=createEmptyMovieClip("ytplayer",1);


//create a listener object for the MovieClipLoader to use

ytPlayerLoaderListener={};

var loadInterval:Number;


//When the player clip first loads, we start an interval to check for when the player is ready

ytPlayerLoaderListener.onLoadInit=function(){

   loadInterval=setInterval(checkPlayerLoaded,250);

}

function checkPlayerLoaded():Void{

   //once the player is ready, we can subscribe to events

   if(ytplayer.isPlayerLoaded()){

      ytplayer.setSize(Stage.width,Stage.height);

      clearInterval(loadInterval);

   }

}


//create a MovieClipLoader to handle the loading of the player

ytPlayerLoader=new MovieClipLoader();

ytPlayerLoader.addListener(ytPlayerLoaderListener);


//load the player

ytPlayerLoader.loadClip("http://www.youtube.com/v/"+vidId+"&hl=en&fs=1",ytplayer);


//adjust size when user clicks full-screen

var listener:Object=new Object();

Stage.addListener(listener);

listener.onFullScreen=respondFunction;

function respondFunction(){

   ytplayer.setSize(Stage.width,Stage.height);

}

11 comments:

Erni H said...

You have saved my life man, thanks !

Anonymous said...

thanks for this, just what i needed!

Anonymous said...

Excellent workaround for the https balogna.

madturki said...

This needs way better search engine placement! https google youtube embed ssl!!!!

Thanks so much for the help

Anonymous said...

Thank you, this is perfect!

Anonymous said...

Hi I"m having an issue where IE7 and 8 are not playing it at all. Am I doing something wrong?

Kevin said...

Not playing on IE 7 and 8 either. It does work on your example site. Any thoughts what I should change? tx.

Anonymous said...

Kevin is right... Like many before you this seems like the perpetuam mobile and every time I think I've found the solution I'm being disappointed.

THIS SOLUTION DOESN'T WORK!

IE8 and I believe 7 simply don't show the movie so no option for anyone taking it's website and users serious.

But... I won't rest until the solution is found even if I have to wait for Youtube to start on https.

Regards,

Blans

Noah! said...

Really not sure what the problem is that would prevent it from working in IE7 or IE8 for you. If it's working on https://secure.peta.org/site/Advocacy?cmd=display&page=UserAction&id=1791 for you, try downloading https://secure.peta.org/SWFPlayer.swf.

Anonymous said...

Noah,

You are right, it now works.

I downloaded the latest flash player and that did the trick for IE obviously. Not sure if it would also work for our website though. It's a fully forced https website so gotta give it a try next week.

In FF I even keep the blue tab so if this would work for our site it would be pretty special.

Still a little worried about it not showing anything when the flash player is not updated to the latest version. But gonna experiment with it.

Can you explain how and where I use/place the actionscript and swf?

Blans

Ha Son said...

Hey mate, thanks for your help, now i can do it and made it happen in IE, thanks so much

Ha Lam (Vietnam)