Question

重点是让此视频始终为视口宽度的100％; 但要将高度调整到不需要滚动的程度。

这可以在不使用溢出的情况下实现：隐藏; ？

您可以按原样复制粘贴以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Hello User!</title>   
   <style type="text/css">    
        div#video-border { border: 2px solid red; }
        video { max-width: 100%; height: auto; width: 100%; }
   </style>
</head>  

<body>
   <div>
   <div>
     Im the navigation!! Wupii
    </div>
     <div>
       <p>I'm more text, more things</p>
       <p>I'm more text, more things</p>
     </div>  
     <div id="video-border">
       <video controls="controls">
         <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
       alt text
       </video>
     </div>
     <div id="footer"><p>I'm the footer hello</p><p>I'm the footer yeah again</p></div>
</body>
</html>

说实话，我甚至不确定这个解决方案是否能正常运作。不确定视频是否会在这些情况下表现，仍然......想知道。

请建议。

Answer 1

同意Patrick。

如果您想在固定的预先计算的高度框中使用它，请使用：

div#video-border {
    background-color: black;
    border: 2px solid red;
}

video {
   max-width: 100%;
   width: 100%;
   height: auto;
   max-height: 150px; /* your desired height */
}

如何在没有滚动的情况下制作宽度为100％的自适应视频？

1 个答案: