Question

在我的导航栏下方，我有一张被渐变覆盖的图片，该图片会渐变到它下方的div中。在这个div之后我有一个页脚。

我在尝试将YouTube视频嵌入到我的图片div和我的渐变div中时会遇到问题。

基本上，保存我的YouTube视频的div需要在这些div之上，并且位于屏幕的中心（从左到右），并且能够快速响应。

但是，我似乎无法成功完成此操作，所有有关自适应YouTube视频的教程都无法正常运行。

有人能帮帮我吗？谢谢！

HTML代码：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
        <link href="images/favicon.ico" rel="icon" />
        <title>Aduro Pictures</title>
    </head>
    <body>
        <header>
            <div id="logo_home">
                <a href="index.html" title="Home"><img id="logo" src="images/logo.jpg" alt="logo"></a>
            </div>
            <nav>
                <ul>
                    <li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
                    <li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
                    <li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
                    <li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
                    <li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
                    <li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
                </ul>
            </nav>
        </header>
        <div id="main_wrapper">
            <div id="image_container"></div>
            <div id="gradient"></div>
            <div id="main_container"></div>
            <div id="video_container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <footer>
            <p class="copyright">Copyright &copy; 2016.</p>
        </footer>
    </body>
</html>

CSS代码：

body {
    margin: 0px;
    font-size: 62.5%;
    padding: 0px;
    }

header {
    width: 100%;
    height: 90px;
    background-color: #000000;
    }

#logo_home {
    position: relative;
    float: left;
    left: 5%;
    width: 20%;
    top: 7.5px;
    }

#logo {
    height: 75px;
    width: 300px;
    }

nav {
    position: relative;
    float: right;
    right: 5%;
    width: 35%;
    height: 50px;
    top: 20px;
    }

ul {
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    top: 17.5px;
    }

li {
    display: inline-block;
    margin-left: 2.5%;
    margin-right: 2.5%;
    position: relative;
    list-style-type: none;
    padding-top: 0px;
    }

.nav_link {
    font-family: 'PT-Sans', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    }

.nav_link:link {
    color: #ffffff;
    }

.nav_link:visited {
    color: #ffffff;
    }

.nav_link:hover {
    color: #dddddd;
    }

#main_wrapper {
    height: 2000px;
    width: 100%;
}

#image_container {
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 580px;
    background: url('../images/background5.jpg') no-repeat; 
}

#gradient {
    position: absolute; 
    top: 90px; 
    left: 0px; 
    width: 100%; 
    height: 580px;
    background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%; 
}

#main_container {
    background-color: #1d1d1d;
    height: 1420px;
}

footer {
    background-color: #000000;
    height: 50px;
    width: 100%;
    margin: 0px;
    top: 0px;
    position: relative;

    }

.copyright {
    color: white;
    font-family: 'PT-Sans', sans-serif;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    top: 15px;
    margin: 0px;
    padding: 0px;
    }

另外，我可能犯了一些错误，或者错误地定位了错误，在这种情况下，我提前解决了问题。我不熟悉HTML＆amp; CSS。

谢谢！

Answer 1

只需在position: absolute：https://jsfiddle.net/1aa87g9b/

中添加div#video_container即可

无法嵌入YouTube视频

1 个答案: