title: How Do I Make An Element Visible in Fullscreen Mode With VideoJS
body: <p>I am using VideoJS as my HTML5 video player and I am trying to add a sidebar for additional custom controls.  My custom bar is visible and functioning in normal view mode but disappears in fullscreen view mode.</p>
  
  <p>Here is some code ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 8]&gt;&lt;html class="no-js lt-ie9" lang="en"&gt;&lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;&lt;html class="no-js" lang="en"&gt;&lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
  
    &lt;!-- Set the viewport width to device width for mobile --&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;
  
    &lt;title&gt;Video | Player&lt;/title&gt;
  
    &lt;!-- VIDEOJS --&gt;
    &lt;link href="video-js.css" rel="stylesheet" type="text/css"&gt;
    &lt;script src="video.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      videojs.options.flash.swf = "video-js.swf";
    &lt;/script&gt;
  
    &lt;!-- VIDEOJS ERRORS --&gt;
    &lt;script src='videojs.errors.js'&gt;&lt;/script&gt;
    &lt;link href='videojs.errors.css' rel='stylesheet'&gt;
  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- STYLES --&gt;
    &lt;style type="text/css" media="screen"&gt;
      * { padding:0; margin:0; }
      body { background-color: #000; }
  
  #player{
    overflow: hidden;
    position: relative;
  }
  
  #slider{
      /*display: none; /* Start hidden */
      /*height: 100%;*/
      position: absolute;
      /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
      top: 0;
      /* 100% height of player div */
      bottom: 0em;
      right: 0;
      /* Controls are absolutely position, so no padding necessary */
      padding: 0;
      margin: 0;
      /* Width includes any margin you want above or below control items */
      width: 2.0em;
      background-color: rgb(0, 0, 0);
      /* Slight blue so it can be seen more easily on black. */
      /*background-color: rgba(7, 40, 50, 0.7); */
      font-style: normal;
      font-weight: normal;
      font-family: Arial, sans-serif;
      overflow:hidden;
      z-index:1101;
  }
  
  #slider #arrow{
      width:2em;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      z-index:1103;
      background-color: rgb(233, 191, 44);
  }
  
  #slider #arrow img{
      padding:0;
      margin:0 0 0 3px;
      position:absolute;
      top:45%;
  }
  
  #slider #arrow img:hover{
      opacity:.75;
      filter:alpha(opacity=75); /* For IE8 and earlier */
  }
  
  #slider #main{
      width: -moz-calc(100% - 2em);
      width: -webkit-calc(100% - 2em);
      width: -o-calc(100% - 2em);
      width: calc(100% - 2em);
      height: -moz-calc(100%);
      height: -webkit-calc(100%);
      height: -o-calc(100%);
      height: calc(100%);
      position:absolute;
      top:0;
      left:2em;
      padding:0;
      z-index:1102;
  }
  
  #slider #main #mainContent{
      width: 100%;
      height: -moz-calc(100% - 7%);
      height: -webkit-calc(100% - 7%);
      height: -o-calc(100% - 7%);
      height: calc(100% - 7%);
  }
  
  #slider #main #mainFooter{
      width: 100%;
      height: 7%;
  }
  
  .video-js { margin:0 auto; }
  .vjs-fullscreen { padding-top: 0px }
  .vjs-default-skin .vjs-big-play-button { top: 50%; left: 50%; margin: -4em auto auto -6em; }
  .vjs-default-skin .vjs-control-bar { right:3.25em; }
    &lt;/style&gt;
  
    &lt;script&gt;
  $(document).ready(function(){
    var w=window.innerWidth;
    var h=window.innerHeight;
    var myPlayer = videojs("example_video_1");
  
    if(w/16 &gt; h/9) {
      var r = (w - (16*(h/9)) ) / 2;
      myPlayer.dimensions((16*(h/9)),h);
      document.getElementById('slider').style.right = r + 'px';
    } else {
      var r = (h - (9*(w/16)) ) / 2;
      myPlayer.dimensions(w, (w/16) * 9);
      document.getElementById('player').style.marginTop = r + 'px';
    }
  });
    &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="player"&gt;
  
      &lt;video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="http://www.videojs.com/img/poster.jpg" data-setup='{"example_option":true}'&gt;
    &lt;source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /&gt;
    &lt;source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' /&gt;
    &lt;source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' /&gt; 
  &lt;/video&gt;
  &lt;div id="slider"&gt;
  
    &lt;div id="arrow"&gt;
      &lt;img id="arrowImg" src="http://placehold.it/18x32" /&gt;
    &lt;/div&gt;
    &lt;div id="main" style=""&gt;
      &lt;div id="mainContent" style=""&gt;
        &lt;div style="width:47%; height:44.5%; padding: 2% 1% 1% 2%; float:left;"&gt;
          &lt;div style="width:100%; height:100%;"&gt;
            &lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:47%; height:44.5%; padding: 2% 2% 1% 1%; float:left;"&gt;
          &lt;div style="width:100%; height:100%;"&gt;
            &lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:47%; height:44.5%; padding: 1% 1% 2% 2%; float:left;"&gt;
          &lt;div style="width:100%; height:100%;"&gt;
            &lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:47%; height:44.5%; padding: 1% 2% 2% 1%; float:left;"&gt;
          &lt;div style="width:100%; height:100%;"&gt;
            &lt;a href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="mainFooter" style="background:#e9bf2c;"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  
        &lt;!-- CUSTOM --&gt;
        &lt;script type="text/javascript"&gt;
      // Once the video is ready
      videojs("example_video_1").ready(function(){
  
    var myPlayer = this;     // Store the video object
    var aspectRatio = 9/16;  // Make up an aspect ratio
  
    //myPlayer.play();
    this.errors();
  
  });
  
  $(document).ready(function(){
    var h=window.innerHeight;
    var w=window.innerWidth;
    var r = 0;
    if(h/9 &gt; w/16) {
      r = w;
    } else {
      r = (16*(h/9));
    }
  
    var nr = r + 'px';
    var toggle = true;
    $("#arrow").click(function(){
      var div=$("#slider");
      if(toggle) {
        div.animate({width:nr},"slow");
      } else {
        div.animate({width:'2em'},"slow");
      }
      toggle = !toggle;
    });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>
  </p>