JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="videoplayer"></div>
<div id="map"></div>
<div id="footnotes"></div>
<div id="timecode"></div>
<div id="twitterdiv"></div>

CSS

body {
    font-family: Arial, sans-serif;
}
#videoplayer {
    float: left;
    width: 360px;
    height:200px;
    margin: 0;
}
#map {
    margin: 0 0 0 4px;
    float:left;
    width: 200px;
    height:204px;
    background-color: gray;
}
#footnotes {
    margin-top: 20px;
    padding: 20px;
    background-color: lightgray;
    clear: both;
}

JavaScript

// From http://popcornjs.org/popcorn-with-youtube
//
// This demonstrates how to use Youtube and footnotes
//
// The popcorn.js library is at: http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js



// Create a popcorn instance by calling the Youtube player plugin
var popPlayer = Popcorn.youtube(
    '#videoplayer',
    'http://youtu.be/_pV2zz3z0oM');

// add a footnote at 2 seconds, and remove it at 6 seconds
popPlayer.footnote({
    start: 2,
    end: 4,
    text: "Pop!",
    target: "footnotes"
});

popPlayer.googlemap({
    start: 4,
    end: 6,
    type: "ROADMAP",
    target: "map",
    lat: 43.665429,
    lng: -79.403323
});
/*
popPlayer.twitter({
    start: 5,
    end: 15,
    6 title: "Evan's Twitter",
    src: "@evanraskob",
    target: "twitterdiv",
});
*/
// play the video right away
popPlayer.play();