Why is HTML5 video fullscreen making the whole page fullscreen?

Question

I'm using HTML5 videos on our site. I've tried with plain HTML5 and with the Video.js plugin. Both of which, when you click the full screen button in the controls, make the entire page fullscreen but not the video.

I can't tell if it's something with my CSS, or some other bug. Does anyone have an idea why it's doing this?

Here's a link for an example: example video

Here is a code snippet for the video with video.js involved:

    <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”类的视频...删除了这两个类，它可以正常工作。