Question

我正在尝试实现与this类似的背景视频。拉伸全屏但保持400px的高度。没有JavaScript我怎么能实现这个目标？继承了我到目前为止的HTML

    <div class="project__three">
        <div class="grid">
                <video src="./videos/test.mp4" id="bg-video" muted autoplay loop ></video>
        </div>
    </div>

Answer 1

我曾经写过一篇关于此事的博客文章。我不认为你正确使用了视频标签。我认为看起来应该更像这样：

<video muted autoplay loop>
   <source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
   <source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
   <source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

我很确定你必须加入＆＃34; ogg＆＃34;和＆＃34; webm＆＃34; HTML5视频的扩展功能可以完全发挥作用。

以下是我发布的link详细信息。

Answer 2

这适用于上述，虽然看起来不太好。请将它放在你的CSS中

   video{
         webkit - transform:scaleX(2);
        moz - transform:scaleX(2);
         transform:scaleX(2);
  }

HTML部分背景视频

2 个答案: