CSS 替换 YouTube 嵌入的黑条

Question

我正在尝试将 YouTube 视频作为滑块的背景。就目前而言，视频位于完美的位置。我只想在黑条所在的地方放一张图片：https://www.dropbox.com/s/fjvlxamvjqtyx54/Screenshot%202015-08-18%2012.05.53.png?dl=0

这是我的代码：

<div id="slide_0" class="slide-content">
          <div class="slide-bg" style="background: url('/assets/images/pages/home/home-background.jpg') center top no-repeat;background-size: cover;">
            <iframe height="100%" width="100%" src="https://www.youtube.com/embed/6MWYmtT6bvc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="slide-footer">
            <table>
              <tr class="middle">
                <td>
                  <center>
                  </center>
                  <img class="logo" id="slider-logo" src="/assets/images/pages/home/heading-1.png" alt="">
                </td>
              </tr>
              <tr class="bottom">
                <td>
                  <div class="slide-caption">
                      <div class="content">
                            <span class="caption"><img class="globe" src="/assets/images/pages/home/globe1.png" alt="">Ray caters for international appointments and makes regular visits to Moscow, New York, The Middle East and most European Cities, stay tuned for the dates of his next trip.</button>
                      </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

我希望背景图片（第 2 行）成为视频的背景。

注意我是如何使用 height="100%" 和 width="100%" 的。在删除宽度属性时，我留下了：https://www.dropbox.com/s/pq2t4basz4lhf8a/Screenshot%202015-08-18%2012.09.03.png?dl=0

如果你能提供帮助那就太好了， 谢谢！ 托比。

Answer 1

除非您知道视频的宽高比，否则您不能这样做。原因是您在<iframe> 中加载了一个新页面，该页面的内容是不可变的。

如果您知道纵横比并且它是恒定的（比如说 16:9），您可以使用纯 CSS 根据高度计算宽度：

width: calc(your_height * 16 / 9);

然后将其对齐到中心，这将起作用。

如果比率已知但它是动态的，您可以使用 JavaScript 执行相同操作。

如果它是未知的 - 你不能做任何事情。

另一种方式：

也许这种方式不适合你，但仍然值得一提。显示视频图像而不是 youtube 视频，例如像这样http://img.youtube.com/vi/EqWRZrupLrI/0.jpg。这将允许您使用通常的background-size: contain 为 youtube 图像围绕该图像制作背景。当用户单击图像时，您可以将其替换为视频并启用自动播放。发生这种情况时，背景当然将不再可见。

Answer 2

这是做不到的。 视频周围的黑色填充是播放器的一部分，与视频本身位于同一“层”上。 Youtube 将其用于填充视频周围的额外空间，以便他们可以保持视频的纵横比，同时仍然能够使播放器适应请求的大小（width 和 height 参数）。