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％高度/宽度。

我的自适应视频div的问题

1 个答案: