Question

在线我发现了如何使嵌入式YouTube视频响应，但是，当浏览器窗口缩小到一定大小时，视频就会停止响应（我理解）但是它们都是不成比例的，看起来很糟糕，并且超出它的范围DIV。

有人知道如何解决这个问题吗？

此外，当浏览器窗口收缩时，我的主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;
    }
}

谢谢！

Answer 1

如果背景图片没有响应 - 您应该使用ReDim Preserve Data(0 To UBound(Data) - 1)和background-size:cover;或任何您想要定位背景图片的内容。

对于视频，如果您希望它不会溢出父级，只需添加到父级background-position:center center作为响应方 - 您的视频高度已修复，因此每当您调整浏览器大小时，它都会更改宽高比，如果您不关心旧浏览器支持，则可以使用overflow:hidden单位作为高度和宽度，而不是vw 例如如果我希望我的视频总是16：9并且是浏览器宽度的80％，我会将px高度和宽度设置为iframes，这将是一个简单快速的解决方案

当浏览器窗口收缩时，嵌入式YouTube视频停止响应

1 个答案: