How to make Responsive Youtube Embed Video

Youtube makes it pretty easy to embed a video into your website. But unfortunately the videos still don't respond very well as they are set with a fixed width/height on the iFrame itself. Simply setting this to 100% doesn't work very well as it will distort the proportions.

We have a couple of tricks the make sure this is no longer a problem! Take a look at our example below of a fully responsive Embedded Youtube video.
(Try dragging the corners of the web browser to make the window larger / smaller and notice how the dimensions of the video remain in proportion.)

How did we do this?

Easy!

Step 1: Create a DIV with the following class and insert the normal Youtube Embed code into the container:

<code> &lt;div class="embed-container"&gt; &lt;iframe width="560" height="315" src="//www.youtube.com/embed/2EW2-C5mlH8?rel=0" frameborder="0" allowfullscreen=""&gt; &lt;/iframe&gt; &lt;/div&gt; </code>

Step 2: Now add the below to your style sheet:

/***** Youtube Responsive Code *****/

.embed-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px;

    height: 0;

    overflow: hidden;

    max-width: 100%;

    height: auto;

}

.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

And you are done! How easy was that!

Making it easy for non-techies

If you're comfortable with code this will be a breeze for you to implement… but what about your normal users who have no idea what the above means?

There are 2 ways to approach this.

1. Hardcode a field into your CMS where the user can copy and paste the embed code or video ID. Then when you output it on the front end just wrap DIV around it so that it responds correctly.
   
2. Use your WYSIWYG editor to do this. Most will allow you to code up your own modules. Redactor is an excellent choice for this.

Creating a Redactor Youtube Embed Button

Step 1: Read up on the Redactor creating a button guide: http://imperavi.com/redactor/docs/how-to-add-button/

Step 2: Use my code below to create a button that requests the Youtube ID from the user and then inserts the responsive code into the editor.

if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {};

RedactorPlugins.mymodal = {

    init: function() {

        this.buttonAdd('mymodal', 'Insert a YouTube Video', this.showMyModal);

    },

    showMyModal: function() {

        var callback = $.proxy(function() {

            this.selectionSave();

            $('#redactor_modal #mymodal-insert').click($.proxy(this.insertFromMyModal, this));

        }, this);

// modal call
this.modalInit('Insert a YouTube Video', '#mymodal', 500, callback);
}, insertFromMyModal: function(html) {
this.selectionRestore();
this.insertHtml('<div class="embed-container"><iframe src="//www.youtube.com/embed/' + $('#mymodal-textarea').val() + '?rel=0" allowfullscreen="" frameborder="0"></iframe></div><br><br>');
this.modalClose();
}
}