Question

我正在尝试创建一个响应式网站，该网站会在同一行中保留多个YouTube视频，并会在更改窗口大小时按比例调整。

此外，视频不会放在菜单下方。我真的尝试了一切，但仍然无法正常工作......

HTML部分：

<body>
    <div id="Main_Grid">
        <div id="Header">
            <a id="logo"></a>
            <a id="Search"></a>
            <a href="#" id="English">English</a>
            <nav>
                <a href="#" id="menu-icon"></a>
                <ul>
                    <li><a href="#" class="current">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </nav>
        </div>
        <div id="Video-Container1" >
            <iframe width="640" height="480" src="https://www.youtube.com/embed/N-nb6k_6pwg" frameborder="0" allowfullscreen>
            </iframe>
        </div>
        <div id="Video-Container2" >
            <iframe width="320" height="240" src="https://www.youtube.com/embed/N-nb6k_6pwg" frameborder="0" allowfullscreen>
            </iframe>
        </div>
    </div>

</body>

CSS部分：

body { 
    font-size: 1.05em;
    line-height: 1.25em;
    font-family: Alef Hebrew;
    background: #f9f9f9;
    color: #555;
    height:Auto;
    width:100%;
    margin:0;
    padding:0;
}

#header {
    width: 100%;
    height: 76px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 3px solid #c0c0c0;
    z-index: 100;
}

#Main_Grid {
    position: absolute;
    Width:95%;
    margin: 0 auto;
    padding: 20px;
}

#Video-Container1 {
    position:Relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height: 0;
    overflow: hidden;
}
#Video-Container1 iframe {
    position:Absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#Video-Container2 {
    position:relative;
    padding-bottom:56.25%;
    padding-top:25px;
    height: Auto;
    Width:100%;
}
#Video-Container2 iframe {
    position:absolute;
    top:0;
    Right:0;
    width:100%;
    height:100%;
}

Answer 1

您可以将视频的大小设置为vw和vh的表达式，即视口宽度和高度。如果你想在一行上有多个视频，并且每个视频的宽度最多为页面宽度的20％，并且比例为4：3，你可以像这样编写CSS：

.videoContainer {
  width: 20vw; 
  height: 15vw; /* 3/4 of 20 */
  max-height: 20vh; 
  max-width: 27vh; /* 4/3 of 20 */
}

带有iFrame的HTML

1 个答案: