JSFiddle - React, Tailwind, and code Playground

by rtgibbons

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="youtube" style="width:600px;height:400px;"></div>
<div id="foo" style="position:absolute; top:30px; left:30px; color:red; z-index:100;">
</div>
<div id="image" style="position:absolute; top:400px; left:-400px; z-index:101">
        <img src="http://rd.cas.de/tim/native/image.png" />
    </div>

JavaScript

// create our popcorn instance
var pop = Popcorn.youtube( "#youtube", "http://www.youtube.com/watch?v=v-7kf7OZQtw" );

    pop.footnote({
        start: 1,
        end: 15,
        text: "Youtube working!",
        target: "foo"
    });

// play video
pop.play();

$('#image').animate({opacity:.2, top:'-=400', left:'+=600px'}, 5000);