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

这是不可能的。视频周围的黑色填充是播放器的一部分，与视频本身位于同一 "layer" 上。 Youtube 将其放在视频周围填充额外的 space，这样他们就可以保持视频的宽高比，同时仍然能够使播放器适合请求的大小（width 和 height 参数).

Answer 2

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

如果您知道纵横比并且它是常数（假设 16:9），您可以使用纯 CSS:

基于高度计算宽度

width: calc(your_height * 16 / 9);

然后将其与中心对齐，这样就可以了。

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

如果未知 - 您无能为力。

另一种方式：

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

CSS 替换 YouTube 嵌入的黑条

CSS Replace black bars from YouTube embed

html

css

youtube