为什么HTML5视频全屏使整个页面全屏？答案

【问题标题】：Why is HTML5 video fullscreen making the whole page fullscreen?为什么HTML5视频全屏使整个页面全屏？
【发布时间】：2015-03-05 21:21:51
【问题描述】：

我在我们的网站上使用 HTML5 视频。我尝试过使用纯 HTML5 和 Video.js 插件。这两者，当您单击控件中的全屏按钮时，使整个页面全屏而不是视频。

我不知道这是否与我的 CSS 或其他错误有关。有谁知道它为什么这样做？

这是一个示例链接：example video

这是包含 video.js 的视频的代码 sn-p：

    <div class='twoThreeColumn'>
    <h3 class='current-video-title' style='color:#bbb;margin-bottom:5px;'>$title</h3>
        <video allowFullScreen='true' webkitallowfullscreen='true' mozallowfullscreen='true' width='auto' height='auto' id='webinar-$sku' controls poster='' class='video-js vjs-default-skin vjs-big-play-centered html5-video' preload='auto'>
            <source src='{$url}mp4/{$sku}.mp4' type='video/mp4'/>
            <source src='{$url}ogg/{$sku}.ogv' type='video/ogg'/>
            <source src='{$url}webm/{$sku}.webm' type='video/webm'/>
        </video>
</div>

<script>
    videojs('webinar-$sku',{},function(){});
</script>

【问题讨论】：

能否提供视频对象的plugin.js的sn-ps代码。
添加了我的代码 sn-p，假设您不是要在此处粘贴 video.js，因为这是一个完整的插件。
为什么不能只使用视频标签？它具有内置的全屏功能，没有奇怪的行为......
" 我尝试过使用纯 HTML5 和 Video.js 插件。" .... 普通视频标签也在做同样的事情。

标签： javascript jquery css html html5-video

【解决方案1】：

不确定为什么会出现这个问题，但我已经弄清楚这是由于包含视频的 div id 具有“animated fadeInUp”类...删除了这两个类并且它工作正常。

【讨论】：