How to Embed and Display YouTube Videos on a Secure SSL Page

EDIT: 5/11/2018: The problem of embedding youtube videos in an SSL page is no longer a problem like it was in 2010 when I originally wrote this post. Youtube is now ssl enabled. And with Flash Player embedding an ancient memory, it is best to just embed using the YouTube iframe method.

I’ve found that this variation of code works the best to size and display the embedded iframe video:


<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/QILiHiTD3uc?autoplay=1&showinfo=0&modestbranding=0' frameborder='0' allowfullscreen>
</iframe>
</div>

 

EDIT 08/03/2010: A reader just pointed out that the method outlined in this post will present a warning in in the status bar when using the latest version of FireFox. No popups or dialog messages though – that’s good. And it still works flawlessly in IE and Chrome. Thanks to Jayapal for pointing the warning in FF.

Original Post:
Here is a cool trick to get rid of ssl security warning errors when embedding youtube videos into secure web pages.

This solution will work if your server is using Apache and has Mod_Rewrite enabled (most Linux web hosting companies do).

First, add this to your .htaccess file:

RewriteEngine on
RewriteBase /
RewriteRule ^youtube/(.*)$ http://www.youtube.com/$1 [L]

Then to actually embed the video using the following format:

  &lt;object width="560" height="340"&gt;    &lt;param name="movie" value="https://www.yourdomain.com/youtube/v/mydjFYoD4WS&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;autoplay=1" /&gt;        &lt;param name="allowFullScreen" value="true" /&gt;        &lt;param name="allowscriptaccess" value="always" /&gt;        &lt;embed src="https://www.yourdomain.com/youtube/v/mydjFYoD4WS&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;autoplay=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="allowfullscreen" width="560" height="340" /&gt;  &lt;/object&gt; 

Notice the urls in the embed code are https://www.yourdomain.com/youtube/….

With the rewrite code in place in your htaccess file, Apache will now see those urls and rewrite them into the actual youtube urls (http://www.youtube.com/….). The result…no more security warnings. 🙂 The secure page loads securely. The youtube video plays without causing any warning problems.