fullscreen jplayer

by Dylan Valentine

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.js"></script>
<div id="Footprints_Page" align="center" style="position:absolute; background-repeat: no-repeat; top:0px; left:0px; ">

  <!--Video Player-->
  <div id="Footprints_1" style="position:absolute; top: 180px;"></div>

</div>

CSS

video, #Footprints_1 {
  border: 1px black solid;
}

JavaScript

function Footprints() {
  console.log("Footprints");
  
  //Main video player for video page 
  $("#Footprints_1").jPlayer({
    supplied: "webmv, ogv, m4v",
    loop: true,
    size: {
      width: 1450,
      height: 750
    }
  }).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
    $(this).jPlayer("pauseOthers");
  }).bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    var elem = document.getElementById("Footprints_1");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  });
  $("#Footprints_1").jPlayer("setMedia", {
    //set m4v tag to array Footprints VideoList
    m4v: "http://media.w3.orgh/2010/05/sintel/trailer.mp4"
  }).jPlayer("play");
  $("#Footprints_1").show();


}

$(document).ready(function(){
	Footprints();
});