0

关键是让这个视频始终是视口宽度的 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>

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

请指教。

4

1 回答 1

1

同意帕特里克。

如果您想在固定的、预先计算好的高度框中使用它，请使用以下命令：

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

video {
   max-width: 100%;
   width: 100%;
   height: auto;
   max-height: 150px; /* your desired height */
}
于 2012-10-18T15:54:24.390 回答