个人中心
gpt4 book ai didi

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

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

在网上我发现了如何使嵌入式 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/

25 4 0
文章推荐： linux - 文件读取缓冲区在 nasm 中为空
文章推荐： c++ - VS2008 64 位 fread 失败
文章推荐： c++ - 使用单例在线程之间传递数据
文章推荐： html - 文本叠加隐藏在旁边的图像后面
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com