Jquery HTML控件在全屏显示时自动出现

Jquery HTML控件在全屏显示时自动出现,jquery,html,css,Jquery,Html,Css,我有一个视频在我的html代码 <video width="100%" class="posted_vid"> <source src="uploaded_videos/<?php echo $Video; ?>"> </video> <div class="video_controls">

我有一个视频在我的html代码

    <video width="100%" class="posted_vid">
            <source src="uploaded_videos/<?php echo $Video; ?>">
    </video>                                

        <div class="video_controls">                        
                    <input type="range" id="font-1-size" value="0" class="video_range"  min="0"><br>
                    <img src="img/playicon.png" class="play_button">
                    <img src="img/pauseicon.png" class="pause_button">
                    <img src="img/volumeicon.png" class="volume_button">
                    <input type="range" min="0" max="1" step="0.1" class="volume">
                    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
                    <span class="duration">0:00</span>  
                   <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
       </div>

$("body").on('click', '.fullscreen_vid', function(event) {
    var vid = $(this).parent().siblings('.posted_vid')[0];
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }   
});


不要将视频设置为全屏。全屏设置包含视频和自定义控件的DOM节点

<div id="container">
  <video width="100%" class="posted_vid">
    <source src="uploaded_videos/<?php echo $Video; ?>">
  </video>
  <div class="video_controls">
    <input type="range" id="font-1-size" value="0" class="video_range" min="0"><br>
    <img src="img/playicon.png" class="play_button">
    <img src="img/pauseicon.png" class="pause_button">
    <img src="img/volumeicon.png" class="volume_button">
    <input type="range" min="0" max="1" step="0.1" class="volume">
    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
    <span class="duration">0:00</span>
    <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
  </div>
</div>


您创建的控制器在DOM中的什么位置?大概不是在你切换到全屏模式的元素里面…?@CBroe我加上了控制器谢谢你的帮助,同时用这些有用的信息丰富了我的无限小的大脑。
$("body").on('click', '.fullscreen_vid', function(event) {
  var vid = $('#container');  // <------ this 
  if (vid.requestFullscreen) {
    vid.requestFullscreen();
  } else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
  } else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
  }
});