by Tom Millard

Youtube Responsive shiv for CMS Driven Content

javascript - youtube

Edits have been made to the repo code found here

When a user adds a youtube video to the site using a WYSIWYG editor the initial code output will not be responsive unless the user appends the needed element manually.

This shiv allows the user to copy and paste the video into a WYSIWYG from youtube and forget about all the responsive woes.

        .youtube-video {
            max-width: 640px;

        .youtube-video__container {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px; height: 0; overflow: hidden;

        .youtube-video__container iframe,
        .youtube-video__container object,
        .youtube-video__container embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        //requires jquery
        function youtube(){
            var t = this
            ,   node = $("iframe[src^='']")

            function init(){

            function build(){
                for(var x = 0, xl = node.length; x<xl; ++x){
                    var h = template(node[x])
                    ,   i = $(node[x]);

            function template(iframe){
                var html = '<div class="youtube-video"><div class="youtube-video__container">'+ iframe.outerHTML +'</div></div>';
                return html;

        new youtube();

Code on github