移动全屏幕上的视频标签自定义控制器问题

Question

我在移动全屏幕上遇到带有自定义控制器的视频标签问题。 当我在笔记本电脑上用Chrome检查它并在移动视图上查看时，一切正常，但当我在真实设备上检查时，自定义控制器不会在移动全屏显示。

您可以在http://magicwallpost.com/demo.html看到我的演示。

  <main class="main" role="main">
  <div class="custom-video" id="custom-video">
     <!--THE VIDEO-->
     <video id="myvideo" style="width:100%; height:100%;" preload="metadata">
          <!-- <source src='test.mp4' type='video/mp4'> -->
          <source src='video.mp4' type='video/mp4'>
        <p>Your browser does not support the HTML5 Video Element</p>
     </video>
     <!--CONTROLS-->
     <div id="mycontrols" data-config='{"nextBtn":"true","prevBtn":"true","loop":"true"}'>
        <div class="ctl-top">
          <div class="seeker">
              <progress id="progressbar" class="progressbar" max="100" value="0"></progress>
              <input id="seekbar" value="0" class="seekbar" type="range">
              <div class="buffer"></div>
              <div class="played"></div>
           </div>
        </div>
        <div class="ctl-bottom">
          <div class="ctl-left">
            <button id="playpause" class="icon-play"></button>
            <div id="volume-ctl">
              <button id="mute" class="icon-volume-2"></button>
              <input id="volumebar" class="volumebar" value="1" min="0" max="1" step="0.1" type="range">
            </div>
            <div id="duration-ctl">
              <span id="cr-dr">00:00</span>/<span id="tt-dr">00:00</span>
            </div>
          </div>
          <div class="ctl-right">
            <button id="fullscreen" class="icon-fullscreen-alt"></button>
          </div>

        </div>  
     </div>
  </div>