Question

我正在尝试使用bootstrap的responsive-embed来嵌入YouTube视频，但出于某种原因它根本没有显示在页面上。我知道它在页面上，因为我正在使用一个读取它的屏幕阅读器，我可以播放它并听到声音，但在视觉上它根本不显示。知道我做错了吗？

我的代码：

<div class="embed-responsive">
    <iframe class="col-md-4 embed-responsive-item" src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div>

Answer 1

您的视频播放器不可见，因为Boostrap的默认CSS将.embed-responsive高度设置为0px。

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

要显示您的视频播放器，您需要设置高度。查看Bootstrap's embed-responsive documentation，它们提供了一些可选维度：

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class=" col-md-4 embed-responsive-item"  src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class=" col-md-4 embed-responsive-item"  src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div>

或者，您可以使用自定义CSS设置自己的自定义高度：

.embed-responsive { height:100px; }

请参阅live JSFiddle demo。

Answer 2

检查其他一些依赖CSS或SCSS的文件总是很不错的。在我的情况下，一个sintax错误在那里打破了其他页面。

Bootstrap响应式嵌入奇怪的行为

2 个答案: