他们如何能够如此流畅地设计视频风格？

Question

我不太确定从这里到哪里去，但我看到了这个网站 - http://www.equus-automotive.com/en_US/。视频似乎与浏览器的宽度和高度相当流畅。滚动条甚至不显示，这正是我想要实现的。该视频似乎也始终居中。

他们是怎么做到的？

这是我目前的情况 - https://jsfiddle.net/9Ly5tzws/

非常感谢您的时间和精力。非常感谢！

<!--====================
---- Navigation Bar ----
=====================-->
<div id="navbar">

  <ul>
    <li>HOME</li>
    <li>PRODUCTS</li>
    <li>VIDEOS</li>
    <li>MUTE</li>
  </ul>
</div>


<!--==================
---- Content Wrap ----
===================-->
<div id="bgcontainer">
  <video id="bg" src="http://www.videvo.net/home.webm" autoplay="true" loop="true" muted="true"></video>
</div>


<!--============
---- Footer ----
=============-->
<div id="footer">
</div>

Answer 1

要完成这项工作，您需要知道视频的纵横比，它反映在容器的顶部填充中。有关更详细的解释，请参阅 http://alistapart.com/article/creating-intrinsic-ratios-for-video。勾号是浏览器根据包含块

的宽度计算填充集的百分比

   #bgcontainer {
        overflow: hidden;
        display: block;
        position: relative;
        height: 0;
        padding-top: 56.294%;
        }

    #bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

Answer 2

你在http://vodkabears.github.io/vide/ or https://github.com/linnett/backgroundVideo之前试过这个插件吗？

他们如何能够如此流畅地设计视频风格？

How are they able to style the video so fluidly?

html

css

html5-video