youtube - zurb基金会youtube嵌入

Question

有没有人遇到过将youtube视频嵌入Foundation 5大3列类的麻烦？

  <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 Sites for Sites v6。