JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<link rel="stylesheet" href="http://genelocklin.appspot.com/css/fluid.css">
<link rel="stylesheet" href="http://genelocklin.appspot.com/css/reset.css">
<div id="wrap" class="container-12">

    <div class="grid-4" id="side">
        <p> 
Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.
    </p> 
        <p> 
Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
    </p> 
    </div><!-- /side -->
    <div id="video" class="grid-8">
    <iframe width="592" height="474" src="http://www.youtube.com/embed/Glq_vb0A-yg" frameborder="0" allowfullscreen></iframe>        
    </div>
</div>

CSS

/*- base 10px ----------*/
html {font-size: 62.5%;}

/*- text ----------*/
html, body { 
    text-rendering:optimizeLegibility;
    font-family: "sans-serif;
    }

/*- body ----------*/    
body { 
    color: #222; 
    font-weight:normal;
    font-size:16px;font-size:1.6rem;
    line-height:1.5em;line-height:2.4rem; 
    }

p { margin-bottom: 24px; margin-bottom: 2.4rem; }

div#wrap { margin-top: 24px; }

JavaScript

// http://css-tricks.com/7066-fluid-width-youtube-videos/

$(function() {

        // Find all YouTube videos
        var $allVideos = $("iframe[src^='http://www.youtube.com']"),

            // The element that is fluid width
            $fluidEl = $("#video");

        // Figure out and save aspect ratio for each video
        $allVideos.each(function() {

                $(this)
                        .data('aspectRatio', this.height / this.width)

                        // and remove the hard coded width/height
                        .removeAttr('height')
                        .removeAttr('width');

        });

        // When the window is resized
        // (You'll probably want to debounce this)
        $(window).resize(function() {

                var newWidth = $fluidEl.width();

                // Resize all videos according to their own aspect ratio
                $allVideos.each(function() {

                        var $el = $(this);
                        $el
                                .width(newWidth)
                                .height(newWidth * $el.data('aspectRatio'));

                });

        // Kick off one resize to fix all videos on page load
        }).resize();

});