个人中心
gpt4 book ai didi

html - 在 Div 中居中响应式 YouTube 视频

转载 作者：行者123 更新时间：2023-11-28 07:27:40 25 4
gpt4 key购买 nike

我已将我的主 div (container_wrapper) 中的 YouTube 视频设为响应式。但是，当浏览器窗口处于全屏状态时，视频的底部会被其下方的 div 截断(footer)。

问题:如何让我的响应式 YouTube 视频在我的主 div (container_wrapper) 的中间居中(水平和垂直，以便它在所有边上都相等)更大，还是必须弄乱其他 div(footer)？

如果视频可以保持相同的宽高比并且不必缩小高度或宽度，我也希望如此。谢谢!

这是我的 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" class="video-container">
                        <iframe class="trouble_in_smalls" height: 640px  width: 1351px 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">
                <img src="images/facebook2.png" alt="fbicon" title="Like Us on Facebook" />
                <p class="copyright2">Copyright Andrew Myers &copy; 2015. All Rights Reserved.</p>
            </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: cover;
background-position: center center;
overflow: hidden;
padding: 50px;
}

#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;
}

.trouble_in_smalls {
margin: 0px auto;
position: relative;
display: block;
top: 130px;
height: 640px;
width: 1351px;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; 
height: 0; 
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5%;
}

.footertext {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 24px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 50%;
top: 5%;}

.left {
text-align: center;
position: relative;

left: 5px;
top: 15px;}

img {
height: 50%;
vertical-align: middle;
position: relative;
float: left;
left: 15%;
top: 25%;
}

.copyright2 {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 12px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 25%;
line-height: 50px;
vertical-align: middle;
}

@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;
    }
}

最佳答案

首先，我会去掉一些 div 上的高度值，比如 html 和 body 标签上的。随着元素的发展和响应式环境的发展，这将使一切变得更加复杂。

如果你不关心支持像 IE9 和更低版本的旧浏览器，你可以使用 flexbox。在 CSS Tricks 上有一个很好的指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望能帮到你!

关于html - 在 Div 中居中响应式 YouTube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31729093/

25 4 0
文章推荐： jquery - JQuery 坐标相差 9px？
文章推荐： ios - 键盘将显示通知。不给出键盘出现的通知
文章推荐： 按住键时 C++ SDL 帧率下降
文章推荐： ios - 为什么贝塞尔曲线路径中的 hotTest/tap 检测会在以下情况下产生不准确的结果？
行者123
个人简介

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

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