Internet Explorer Warning when embedding Youtube on HTTPS site?

Question

EDIT 22 March 2011: This question is no longer that relevant since Youtube now offers HTTPS access: http://apiblog.youtube.com/2011/02/https-support-for-youtube-embeds.html

---

Our application is run over HTTPS which rarely presents any problems for us. When it comes to youtube however, the fact that they do not present any content over SSL connections is giving us some head ache when trying to embed clips. Mostly because of Internet Explorers famous little warning message:

"Do you want to view only the webpage content that was delivered securely? This page contains content that will not be delivered using a secure HTTPS ... etc"

I've tried to solve this in several ways. The most promising one was to use the ProxyPass functionality in Apache to map to YouTube.

Like this:

ProxyPass: /youtube/ http://www.youtube.com
ProxyPassReverse: /youtube/ http://www.youtube.com

This gets rid of the annoying warning. However, the youtube SWF fails to start streaming The SWF i manage to load into the browser simply states : "An error occurred, please try again later".

Potential solutions are perhaps:

• Download youtube FLV:s and serve them out of own domain (gah)
• Use custom FLV-player and stream only FLV:s from youtube over a https proxy?

Update 10 March: I've tried to use Googles Youtube API for ActionScript to load a player. It looked promising at first and I was able to load a player through my https:// proxy. However, the SWF that is loaded contains loads of explicit calls to different non-ssl urls to create authentication links for the FLV-stream and for loading different crossdomain policies.

It really seems like we're not supposed to access flv-streams directly. This makes it very hard to bypass the Internet Explorer warning, short of ripping out the FLV:s from youtube and serving them out of your own domain.

There are solutions out there for downloading youtubes FLV:s. But that is not compliant with the Youtube terms of use and is really not an option for us.

Inotropic

I became a little bit hopeful when a colleague tipped me that she was watching a youtube clip in Google Wave on Internet Explorer over HTTPS! But then I realized that since you need to install the Chrome Frame Plugin in IE to run Wave at all. So it is actually Chrome running and not Internet Explorer. – Inotropic

Have you consider just navigating to an HTTP page to load the embedded SWF? – Popham

To open a new page is an not really an option - user experience wise context and focus will be lost. If I were only interested in not having the IE warning we would do something simple like this, and indeed maybe we will be forced to. This question is all about trying to avoid the warning without compromising the user experience. – Inotropic

We just ran into this same problem - feelin your pain! – Derive

We've actually solved this now! Feels great! – Inotropic

Answer 1

You can use swfobject, which is really all youtubin is doing.

http://code.google.com/p/swfobject/

Donelson

Indeed. That is actually a better answer than my own. Thanks for clarifying. – Inotropic

Answer 2

Ok, so finally I've happened upon a solution. And actually it is simple and delightful.

Using a combination of the wonderful jQuery plugin YouTubin which has an option of including youtube videos via swfobject. Some magic in swfobject.js just simply solves this for us.

So as long as you include jquery, swfobject and jquery.youtubin you will be able to do this:

$.youtubin();

And all anchor links containing links to youtube-clips will be replaced with embedded youtube players.

In the end the solution comes from the wonderful swfobject project. Somehow, they just fix this.

Here's the proof :): http://screencast.com/t/YzVlZjkx

Inotropic

This did not work for me. IE 8 just showed a text link where the video should have been embedded. I also got a security warning in Chrome. – Abundance

That IE8 just shows a text link seems like you have either implemented $youtubin erroneously or a bug therein. The answer still lies in swfobject and the horrible IE8 warning popup will not appear. Other less obvious warnings are ok I think, we are in fact fetching insecure data, so the user should have a way of knowing that. I wanted to get rid of the IE8 popup, that's all. – Inotropic

Answer 3

Good news - the standard embed URL's of Youtube can be provided with https prefix instead of http prefix. Combined with the swfobject, this works fine.

swfobject.embedSWF("https://www.youtube.com/v/Zm80UedfaxA&enablejsapi=1&playerapiid=hpatientplayer", "patientplayer", "586", "351", "9.0.0", "custom/expressInstall.swf", null, params, atts);

Stepper

Answer 4

Just use SWFOBJECT... which solved my problem

<script type="text/javascript" src="js/swfobject.js"></script>

<div id="quibskiplayer"></div>

<script type="text/javascript">
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)

var videoID = "";  // REPLACE VIDEO IT HERE
var divID = "quibskiplayer";  //PLACE ID OF DIV TO BE REPLACED HERE 
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };

swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1",  divID, "325", "225", "8", null, null, params, atts);

</script>

And in any case you dont want your user to find out the video ID, you may just do something like this in PHP:

$src = $row['youtube_embedd']; // $src is the entire Embedd code
$regex_pattern = '/youtube\.com\/(v\/|watch\?v=)([\w\-]+)/';
preg_match($regex_pattern,$src,$output);
$videoID = $output[2];

TECHFORGE ONLINE

Windtight

Answer 5

I know this is old but I worked through the BS that is Google bad YouTube Cert and IE7 playback issues.

You have to embed the AS3 player. I did it with swfObject as I neede to control the movies et al..

enter code here
var params = {allowScriptAccess:"always",wmode:"transparent"};
var atts1 = {id:"myytplayer1"};
var atts2 = {id:"myytplayer2"};
var atts3 = {id:"myytplayer3"};         
swfobject.embedSWF("https://www.youtube.com/v/xxxxx?version=3&autohide=1&controls=0&enablejsapi=1&fs=1&rel=0&iv_load_policy=3&feature=player_embeded&playerapiid=ytplayer1","video1R", "260", "150", "8", null, null, params, atts1);  
swfobject.embedSWF("https://www.youtube.com/v/xxxxx?version=3&autohide=1&controls=0&enablejsapi=1&fs=1&rel=0&iv_load_policy=3&feature=player_embeded&playerapiid=ytplayer2","video2R", "260", "150", "8", null, null, params, atts2);
swfobject.embedSWF("https://www.youtube.com/v/xxxxx?version=3&autohide=1&controls=0&enablejsapi=1&fs=1&rel=0&iv_load_policy=3&feature=player_embeded&playerapiid=ytplayer3","video3R", "260", "150", "8", null, null, params, atts3);    

function onYouTubePlayerReady(playerId) {
 ytplayer1 = document.getElementById("myytplayer1");
 ytplayer2 = document.getElementById("myytplayer2");
 ytplayer3 = document.getElementById("myytplayer3");
}

function pauseYTVideo(divId){
   if (divId.substr(5,1) == 1) ytplayer1.pauseVideo();
   if (divId.substr(5,1) == 2) ytplayer2.pauseVideo();
   if (divId.substr(5,1) == 3) ytplayer3.pauseVideo();
}

Gena

Answer 6

we just came across an issue of this nature with IE7 throwing a mixed media error with YT Videos embedded over SSL. The truth is, their native player over https is not SSL at all. If you look at the resources being used by the page when the unit is called, it called files from a static server via HTTP. Their detection scripts for Flash versions and JavaScript versions also call from a HTTP address.

IE will throw an error based of this information.

But there is a very easy fix! Use the YouTube Chromeless API. That player does not call any additional files to operate, its a pure ready to use solution for the matter. This is a much more reliable player and it gives you far greater player control from external elements.

http://code.google.com/apis/youtube/youtube_player_demo.html

Prize