Internet Explorer Warning when embedding Youtube on HTTPS site?
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
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