gpt4 book ai didi

css - 如何制作宽度为 100% 且无滚动的响应式视频?

转载 作者:太空宇宙 更新时间:2023-11-04 15:34:29 25 4
gpt4 key购买 nike

重点是让这个视频始终是视口(viewport)宽度的 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>

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

请指教。

最佳答案

同意帕特里克的观点。

如果您想在固定的、预先计算高度的盒子中使用它,请使用:

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

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

关于css - 如何制作宽度为 100% 且无滚动的响应式视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12958445/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com