Popcorn Test

by dananddna

HTML

<!doctype html>
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
  </head>
      
    

  <body>
      <button id="toggle">Toggle</button>
     <div id="masterPopcorn">
        <div id="videoplayer" style="width: 720px; height: 400px;" >    </div>
        <div id="footnotediv"></div>
        <div id="bottomdiv"></div>

     </div>
       
  </body>
</html>

CSS

#masterPopcorn{
    background-color: black;
    width: 720px;
    height: 410px;

}

#videoplayer{
    width:720px;
    padding: 5px;
    float:left;
    margin: 0px;
    background: black;
}

#bottomdiv{
    width: 720px;
    height: 200px;
    padding: 5px;
    background-color: gray;
    -webkit-transition: all 1s linear 2s; 
    transition: all 1s linear 2s;
}



#footnotediv{
    padding: 5px;
    width: 720px;
    height: 20px;
    background-color: lightgray;
    clear:both;
    
}

JavaScript

var button = document.getElementById('toggle'),
    text = document.getElementById('bottomdiv');
    footnote = document.getElementById('footnotediv');

button.onclick = function() {
  var isHidden = text.style.display == 'none';
  text.style.display = isHidden ? 'block' : 'none';
    
  var isHidden = footnote.style.display == 'none';
  footnote.style.display = isHidden ? 'block' : 'none';
};

// ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
 
         // Create a popcorn instance by calling the Vimeo player plugin
          var bothVideo = Popcorn.vimeo(
         '#videoplayer',
         'http://player.vimeo.com/video/88179780');
 
         // footnote
        bothVideo.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });

        bothVideo.footnote({
           start: 7,
           end: 10,
           text: "Bothriolepis!",
           target: "footnotediv"
         });
          
        bothVideo.googlemap({
            start: 11,
            end: 13,
            type: "ROADMAP",
            target: "bottomdiv",
            location: "Miguasha, Quebec", 
            zoom: 6,
            lat: 0,
            lng: 0,
         });
         
          bothVideo.image({
              start: 1,
              end: 3,
              src:"http://pnf-primeval.wikispaces.com/file/view/Bothriolepis%20%201.jpg/349017706/Bothriolepis%20%201.jpg",
              href:"http://www.drumbeat.org/",
              target: "bottomdiv",
       
        });
          
          bothVideo.webpage({
              id: "webpages-a",
              start: 4,
              end: 6,
              src: "http://www.danieljoelnewman.com",
              target: "bottomdiv"
          });
                 
          bothVideo.webpage({
              id: "webpages-b",
              start: 15,
              end: 20,
              src: "https://p3d.in/cYFrQ",
             ...