Old Video popup

by daraand

HTML

<link rel="stylesheet" href="http://www.getuikit.com/docs/css/uikit.docs.min.css">
<link rel="stylesheet" href="http://www.getuikit.com/docs/css/docs.css">
<script src="http://www.getuikit.com/dist/js/uikit.min.js"></script>
<script src="http://www.getuikit.com/docs/js/docs.js"></script>
<img style="z-index: -1;" alt="Remote Teams and Tools from Theory Animation" src="http://theoryanimation.com/images/aboutus/volunteer.jpg" width="100%" />
<div style="position: relative; left: 1.38%; top: -3.8em; text-align: left;">
    
<h1><span style="color: white; font-size: 1.18em;"><strong>the People Behind the Movies</strong></span></h1>

    <div style="margin-left:50px; margin-right:50px;">
        
<h3 class="uk-text-primary" style="text-align: center;"><span style="color: #4cacd7;">Documentary interviews with some of the best and brightest in visual effects and animation</span></h3>

        <div class="videoWrapper">
            <iframe name="vfxdoc" src="//player.vimeo.com/video/92075472" width="632" height="386" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
        <p><a href="http://vimeo.com/92075472">interview baeby 01</a> from <a href="http://vimeo.com/theorystudios">theory studios</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
        <p>In the mean-time, enjoy the copy &amp; pasted text from Volunteers!</p>
        <!-- Note that the target needs to be set to the name of the frame -->
        <p><a href="//player.vimeo.com/video/92075472" target="vfxdoc">Episode 1 - Briana Aeby</a>
        </p>
        <p><a href="http://www.youtube.com/embed/QFCSXr6qnv4" target="vfxdoc">Episode 2 - Briana Aeby (Coming Soon)</a>
        </p>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}