Question

我已在我的主要视频（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;
    }
}

Answer 1

首先，我会删除你的div上的一些高度值，比如html和body标签。随着项目的发展和响应环境的出现，它将使一切变得更加复杂。

如果您不关心支持IE9及更低版本等旧浏览器，则可以使用flexbox。 CSS技巧有一个非常好的指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我希望我能帮到你！

以Div

1 个答案: