javascript - 为什么 HTML5 video fullscreen 让整个页面全屏？

Question

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

我不知道这是我的 CSS 问题还是其他问题。有谁知道为什么要这样做？

这是一个示例链接:example video

这是视频的代码片段，涉及 video.js:

    <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>

Answer 1

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