zurb 基金会 youtube 嵌入答案

【问题标题】：zurb foundation youtube embedzurb 基金会 youtube 嵌入
【发布时间】：2014-02-04 13:04:20
【问题描述】：

有没有人在将 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 嵌入中使用了相同的方法，但它严重扭曲了它。有什么建议么？

【问题讨论】：

标签： youtube zurb-foundation

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：