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 =＆＃34; 100％＆＃34;和宽度=＆＃34; 100％＆＃34;。在删除width属性后，我还剩下：https://www.dropbox.com/s/pq2t4basz4lhf8a/Screenshot%202015-08-18%2012.09.03.png?dl=0

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

Answer 1

这无法完成。你在视频周围的黑色填充是播放器的一部分，并且位于相同的层上。作为视频本身。 Youtube将其用于填充视频周围的额外空间，以便他们可以保持视频的宽高比，同时仍然能够使播放器符合要求的大小（width＆amp; height参数）。< / p>

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嵌入的黑条

2 个答案: