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", target: "bottomdiv" }); bothVideo.subtitle({ start: 5, end: 15, text: "This is a subtitle", }); // play the video right away //bothVideo.play(); }, false); // add click eventlistener for our button document.getElementById( "togglebutton" ).addEventListener( "click", function( event ) { // toggle our footnote on/off with each click bothVideo.toggle( "bottomdiv" ); bothVideo.toggle( "footnote" ); });
<!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>
#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; }