Question

我正在建立一个带有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>

但是现在我在大屏幕上的视频旁边有非常大的黑色边框，而且根本没有响应。

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

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

YOU get live code and Preview here

.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>

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>

视频背景横幅（不是整页）

3 个答案: