JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="container">
    <h1>YUI FitVids</h1>
            
    <div class="bd">
         <iframe src="http://player.vimeo.com/video/28523422?title=0&amp;byline=0&amp;portrait=0&amp;color=4584be" width="800/embed/?moog_width=800" height="450" frameborder="0"></iframe>
        <div id="actions">
            <a href="#" id="unplug" class="hidden">Unplug</a>
            <a href="#" id="plug" class="hidden">Plug</a>
        </div>
    </div>
    
    <p class="ft">Based on <a href="https://github.com/davatron5000/FitVids.js">FitVids.js</a></p>
</div>

CSS

body {
    background-color: #4584BE;
    color: #FFF;
    font-family: sans-serif;
}
            
h1,
.container .bd,
.container .ft {
    padding-left: 10%;
    padding-right: 10%;
}
            
a {
    color: #E6C92E;
}
            
.hidden {
    display: none;
}

JavaScript

YUI({
    gallery: 'gallery-2012.04.18-20-14'
}).use('gallery-node-fitvids', 'node-base', 'node-event-delegate', function(Y) {
    'use strict';

    var container = Y.one('.container'),
        plug = Y.one('#plug'),
        unplug = Y.one('#unplug');

    plug.removeClass('hidden');

    Y.one('#actions').delegate('click', function(e) {
        var action = e.target.get('id');

        e.preventDefault();

        container[action](Y.Plugin.NodeFitVids);
        plug.toggleClass('hidden');
        unplug.toggleClass('hidden');
    }, 'a')
});