设置 HTML5 视频大小？

Question

好的，所以我正在尝试使用代码而不是 Muse 来重新制作我们的网站......还没有完成样式，仍然只是添加核心元素。如何在此页面上重新创建视频条：

http://wearethefirehouse.com（当前站点）

除了在 HTML 中设置为 100% 宽度？我得到的最接近的是它填满了整个页面 bg，这是我不想要的。

这是通过 2 个 Muse 插件完成的：一个用于在一个空白的“存储”页面上实际“托管”视频文件（响应式），第二个插件（iframe 插件）用于在 index.html 页面上引用该视频。

这是当前播放 gimpy 视频的新页面。我希望它像在第一个站点中那样填写。http://wearethefirehouse.com/firehousetest/

这是我的新网站代码：

HTML：

        <video autoplay loop poster="..assets/video.png" id="bgvid" width=100%>
        <source src="../assets/video.webm" type="video/webm">
        <source src="../assets/video.mp4" type="video/mp4">
        </video>

Answer 1

您可以像这样指定 html5 视频的大小。

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video> 

Answer 2

#vidstrip {
    position:relative;
    padding-top: 0;
    margin-top: 250px;
    overflow: hidden;
}
.vidstrip-text {
    line-height: 2.1em;
    padding: 1em 4em;
    color: white;
}
.vidstrip-section {
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    z-index:-1;
}
.vidstrip-section, #bgvid {
    width:100%;
    height:auto;
}

我尝试模仿 Paypal

希望这可以帮助

http://jsfiddle.net/nr2tds1f/