css - 我的自适应视频 div 有问题

Question

基本上我想要实现的是一个填充 div 的视频，然后当窗口大小减小到移动设备的大小时，它会在 div 中调整得更小。但是，原始视频比 div 大得多，所以我需要调整它的大小。如果我将视频设置为 100% 宽度，它会影响较小的视频，因此当窗口变小时它不会切换，所以我想我可能需要视频的最大宽度？但我试过了，它根本没有改变大小。

我的结构是

我在 html/css 方面还不是很高级，所以请保持基本:)

非常感谢。

<div id="video_1">

<video id='myvideo'controls > 


<source src="video/small.mp4" type="video/mp4" media="all and (max-width: 480px), all               and (max-device-width: 480px)"> 
<source src="video/small.webm" type="video/webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> 
<source src="video/small.ogv" type="video/ogg" media="all and (max-width: 480px), all  and (max-device-width: 480px)"> 

<source src="video/large.mp4" type="video/mp4"> 
<source src="video/large.webm" type="video/webm"> 
<source src="video/large.ogv" type="video/ogg"> 


fallback here



</video>
</div>

Answer 1

这段代码将使您的视频保持比例并相应地缩放。
请务必将您的视频放在容器 div 中。

HTML:

<div id="container">
    <video id="video" autoplay loop>   
        <source src="backgroundmovie.webm" type="video/webm" />
        <source src="backgroundmovie.mp4" type="video/mp4" />  
    </video>
</div>

CSS:

video { 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  overflow: hidden;
}

如果您想让它响应，请添加媒体查询并将视频的父 div 宽度和高度设置为您喜欢的任何值。这将使视频在浏览器缩放时自动跳转到父容器的 100% 高度/宽度。