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.

Answer 1

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

Answer 2

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

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

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);

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

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();
}

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