Javascript 视频播放器的定位和大小

我试图建立一个网页，显示视频

以下是我的网页的外观：

我希望视频能够在画面中屏幕的确切位置播放，并达到屏幕的准确大小。有没有人能帮我提供一个很好的链接到一个关于如何做到这一点的教程。我不是一个完全的新手，但我对HTML5、CSS3和Javascript的知识有限。所以请不要太复杂

这是我刚才用来显示视频播放器、视频和大小的代码：

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="455" height="455" poster="../Images/JungleAnimals.png" data-setup='{"example_option":true}'>
                    <source src="../Videos/JungleAnimals.mp4" type='video/mp4' />
    </video>

---

编写以下html代码：

<img src="http://oi61.tinypic.com/kbozh4.jpg">
<video src="Your_video_url" autoplay>

---

请参见

中的工作示例，为视频元素创建一个包含

div

<div id="cinema">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" poster="http://lorempixel.com/376/208/" data-setup='{"example_option":true}'>
        <source src="../Videos/JungleAnimals.mp4" type='video/mp4' />
    </video>
</div>

通过将其位置设置为

relative

，您可以相对于包含的div定位视频：

#cinema video {
    position: absolute;
    left: 37px;
    top: 23px;
    width: 376px;
    height: 208px;
}

这样你就可以把整个东西作为一个整体移动

演示：

#cinema {
    background-image: url(http://oi61.tinypic.com/kbozh4.jpg);
    position: relative;
    width: 450px;
    height: 344px;
}

#cinema video {
    position: absolute;
    left: 37px;
    top: 23px;
    width: 376px;
    height: 208px;
}