zurb foundation youtube embed

Question

有没有人在将youtube视频嵌入到Foundation 5 large-3 columns类中遇到过任何问题？

  <div class="large-3 columns">

  <p>
    <a href="" data-reveal-id="mapModal"><img src="http://example.com/large.png?111"></a><br />

  </p>
</div>

此类css如下所示：

media="all"
@media only screen and (min-width: 64.063em)
.large-3 {
position: relative;
width: 25%;
}

我在youtube上使用了同样的嵌入方式，它把它扭曲得很厉害。有什么建议吗？

Answer 1

在ZURB Foundation中有一个称为flex-video的特殊组件，您可以使用它来创建响应式YouTube (和Vimeo)嵌入。下面是一个示例：

<div class="flex-video widescreen">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/LyszBoO_r7Y" frameborder="0" allowfullscreen></iframe>
</div>

您还可以通过添加.vimeo类来使用Vimeo视频嵌入。这些也可以通过Sass Mixins获得，并且可以通过使用@include flex-video-container();应用于CSS中的任何现有类或元素。

注意:这也适用于最新版本的ZURB Foundation for Sites v6。

Answer 2

YouTube视频需要特殊处理才能响应，但有一个解决方案！使用FitVids.js：https://github.com/davatron5000/FitVids.js