JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="video-display">
    <div id="youtube-video" style="width: 270px; height:170px" ></div> 
    
    <video height="185" width="250" id="html5-video" class="hidden" muted controls> 
    <source src="http://videos.mozilla.org/serv/webmademovies/Moz_Doc_0329_GetInvolved.mp4"></source>
    <source src="http://videos.mozilla.org/serv/webmademovies/Moz_Doc_0329_GetInvolved.ogv"></source>
    <source src="http://videos.mozilla.org/serv/webmademovies/Moz_Doc_0329_GetInvolved.webm"></source>
    </video>
</div>

<div id="video-footnote"></div>

<div id="youtube-video-2" style="width: 270px; height:170px"></div>

<div id="youtube-video-3" style="width: 270px; height:170px"></div>

<div id="googlemap"></div>

CSS

.hidden {
 display:none;   
}

#video-display {
width: 510px;
height: 200px;  
}
#youtube-video, #html5-video, #youtube-video-2, #youtube-video-3  {
float:left;
}


#html5-video {
margin-top:-15px;
}

#googlemap { 
float:left;
}

JavaScript

// Create a popcorn instance by calling the Youtube player plugin
var other = Popcorn( "#html5-video" ),
// 1st YouTube video to play
    feeling = Popcorn(Popcorn.youtube( "youtube-video",
                "http://www.youtube.com/watch?v=ZmJT9tG8b1Q#at=94",
                { width: 250 } 
                ) 
              ),

// 2nd YouTube video to play       
    mcluhan = Popcorn(Popcorn.youtube( "youtube-video-2",
                "http://www.youtube.com/watch?v=ZFBlGaoAbfI#at=6",
                { width: 250 }
                )
              );

// 3rd YouTube video to play       
    global = Popcorn(Popcorn.youtube( "youtube-video-3",
                "http://www.youtube.com/watch?v=yuTz6G8vplw#at=6",
                { width: 250 }
                )
             );




//FOOTNOTES
feeling.footnote({
  start: 0, 
  end: 10,
  target: "video-footnote", 
  text: "The youtube video will play off of the html5 video and _that_ video will update this footnote"
});

other.footnote({
  start: 2, 
  end: 10,
  target: "video-footnote", 
  text: "The html5 video is the main controlling timeline. This footnote triggers from it"
});

//MAP EVENTS
other.googlemap({
  start: 10, // Our start time in seconds
  end: 2, // Our end time in seconds
  type: "SATELLITE", //
  target: "googlemap", // The id of our target DoM element
  location: "New York", // The location we want our map to display at
  zoom: 1 // Setting the zoom that we would like
});


// VIDEO EVENTS
// Listen for the video's data to be loaded and ready
// Play Video #2 - Pres Obama at 10 secs of Moz/ Main Timeline
other.exec( 10, function() {
    
    
    
    feeling.play();
        
    
  //  uses jQuery to remove the hidden class
  $(other.media).removeClass("hidden");
    
  other.play();
    
});
    
   
   
// Listen for the video's data to be loaded and ready
// Play Video#3 - McLuhan Video at 15 secs of Moz/ Main Timeline
other.exec( 15, function() {
    
    
    
    mcluhan.play();
        
    
...