在网上我发现了如何使嵌入式 YouTube 视频响应，但是，当浏览器窗口缩小到一定大小时，视频停止响应(我理解)但它完全不成比例，看起来很糟糕，并且超出了它的范围分区
有人知道怎么解决吗？
此外，当浏览器窗口缩小时，我的主 div 背景图片也没有响应。有人也可以帮我吗？
HTML代码:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hyperdog Productions</title>
<link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="navigation_bar">
<span><a href="index.html" class="logo" id="home">Hyperdog Productions</a></span>
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAVIGATION_BAR-->
<main id="container">
<div id="container_wrapper">
<div id="video">
<iframe class="trouble_in_smalls" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div> <!--End of CONTAINER_WRAPPER-->
<div id="footer">
</div> <!--End of FOOTER-->
</main> <!--End of MAIN-->
<footer id="copyright">
</footer> <!--End of COPYRIGHT-->
</div> <!--End of WRAPPER-->
</body>
</html>
CSS 代码:
@font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}
@font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
height: 1440px;
width: 100%;
font-size: 0;
overflow-x: none;
}
body {
font-size: 62.5%;
min-width: 575px;
}
.wrapper {
height: 1440px;
}
#navigation_bar {
height: 90px;
width: 100%;
text-align: center;
background-color: #1d1d1d;
}
main {
height: 1300px;
}
#container_wrapper {
height: 900px;
width: 100%;
background-image: url("../images/landscape.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% auto;
}
#footer {
height: 400px;
width: 100%;
background-image: url("../images/bg.png");
background-repeat: repeat;
text-align: center;
}
#copyright {
height: 50px;
width: 100%;
background-color: #1d1d1d;
}
.logo {
padding: 9px 12px;
margin: 0px;
position: absolute;
float: left;
left: 20%;
top: 25px;
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
letter-spacing: 10px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
text-transform: uppercase;
color: #AF7817; /* Cool Light Blue Color: #708090 */
}
.logo:hover {
color: #B8860B;}
.navbar_list {
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
vertical-align: middle;
}
.navbar_list li {
list-style-type: none;
list-style: none;
float: left;
display: inline;
padding: 9px 12px;
margin: 0px;
font-size: 10px;
}
.nav_link:link {
padding: 10px;
margin: 0px;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #ffffff;
}
.nav_link:hover {
color: #a3a3a3;
}
#video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 640px;
overflow: hidden;
}
.trouble_in_smalls {
position: absolute;
top: 15%;
left: 25%;
width: 50%;
height: 50%;
}
@media (max-width: 1750px) {
.logo {
margin-left: 15px;
position: relative;
float: inherit;
left: inherit;
}
.navbar_list {
padding-left: 0px;
position: relative;
float: inherit;
display: inline-block;
right: inherit;
}
}
谢谢!
最佳答案
对于没有响应的背景图片 - 你应该使用 background-size:cover; 和 background-position:center center 或任何你想要放置背景图片的位置.
至于视频，如果你希望它不溢出父级，只需添加到父级 overflow:hidden 作为响应端 - 你的视频高度是固定的，所以每当你调整你的浏览器它改变纵横比，如果你不关心旧的浏览器支持，你可以使用 vw 单位作为高度和宽度而不是 px
例如如果我希望我的视频始终为 16:9 并且占浏览器宽度的 80%，我会将 iframes 高度和宽度设置为 height:80vw; width:45vw 这将是一个简单快速的修复
关于html - 当浏览器窗口缩小时，嵌入式 YouTube 视频停止响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31709041/