0

ポイントは、このビデオを常にビューポート幅の 100% にすることです。ただし、スクロールが不要なところまで高さを設定する必要があります。

これは、overflow:hidden; を使用せずに達成できますか? ?

以下をそのままコピペできます。

<!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 に答える