为什么HTML5视频会全屏显示整个页面？

Question

我在我们的网站上使用HTML5视频。我尝试过使用普通的HTML5和Video.js插件。当你点击控件中的full screen按钮时，这两个按钮都会使整个页面全屏，而不是视频。

我不知道是我的CSS出了什么问题，还是其他一些bug。有谁知道它为什么要这样做吗？

这里有一个例子的链接：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“类……删除了这两个类，它工作得很好。