Question

我正在尝试将带有白色背景的YouTube视频无缝嵌入到白色网站中。视频应该是响应式的。

我正在使用bootstrap 3及其标准的响应式视频类：

HTML

<div class="embed-responsive embed-responsive-16by9">

  <iframe width="1280" height="720" src="//www.youtube.com/embed/xxxxxx
      ?&hd=1&rel=0&amp;showinfo=0;theme=light;color=white" 
      frameborder="0" allowfullscreen></iframe>                 

</div>

CSS

.embed-responsive {
 position: relative;
 display: block; 
 height: 0;
 padding: 0;
 overflow: hidden;
 }

 .embed-responsive .embed-responsive-item,
 .embed-responsive iframe,
 .embed-responsive embed,
 .embed-responsive object,
 .embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
 }

.embed-responsive.embed-responsive-16by9 {
 padding-bottom: 56.25%;
 }

这种方法在80％的时间内都能正常工作，但在某些显示尺寸上，我在一个或多个视频边缘上会出现黑色边框（约1-2 px宽）。我认为这必定是因为像素值在某些屏幕尺寸上变得圆滑，所以iframe的黑色背景显示。

我尝试了其他几个响应式包装器版本，但问题保持不变。不幸的是，在YouTube方面无法将iframe的背景更改为白色。

有谁知道一种聪明的方法让这项工作？我试图避免只根据屏幕尺寸在预先设定的宽度和高度值之间切换，我很乐意让它保持完全响应。

以下是我正在尝试使用的网站：http://teamdiamanti.com#head（尝试调整窗口大小，或者在iPhone / iPad上查看它以查看问题。）

干杯！

制作响应迅速的YouTube播放器而不会以特定比率获得黑色边框？

0 个答案: