视频背景横幅（非全屏）

Question

我可以帮忙翻译，内容与IT技术有关。以下是您需要翻译的内容：

我正在构建一个带有来自YouTube的视频横幅的网站，但我不知道如何实现。

目前我有以下内容：

#video-background {
  position: absolute;
  right: 0;
  top:135px;
  left:0;
  bottom: 0;
  width:100% !important;
  width: auto; 
  height:50vh;
  min-height: 550px;
  z-index: 99;
}

<div id="video-background">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://www.youtube.com/embed/.....">
  </iframe>
</div>

但现在在更大的屏幕上，我的视频两侧有非常大的黑色边框，并且它完全不具有响应性。

- Wilco Van Meppelen Scheppink

Answer 1

你需要在父元素中保留空间，然后将子元素 (iframe) 绝对定位。

试试这个 CSS：

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* This reserves a 16:9 space */
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

并且这个HTML：

<div id="video-background">
    <div class="video-wrapper">
        <iframe frameborder="0" src="https://www.youtube.com/embed/.....">
        </iframe>
    </div>
</div>

代码来源：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

- Maneesh

---

非常感谢您的回答，但这仍然是全屏。使用50vh的高度也可能吗？ - Wilco Van Meppelen Scheppink

#video-background 是否会阻止元素扩展超过 50vh？ - Maneesh

是的！经过一些小的调整，现在它可以工作了！非常感谢 :) - Wilco Van Meppelen Scheppink

Answer 2

完整窗口，带更好的边框。

<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</div>

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

在此获取实时代码和预览

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
 top: 0;
    left: 0;
}

<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</div>

- MD Ashik

Answer 3

请查看：https://www.audiounit.lt

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
 top: 0;
    left: 0;
}

<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</div>

- Danelton Management