zurb foundation youtube embed

Question

У кого-нибудь возникли проблемы с встраиванием видео в YouTube в класс 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

Для видеороликов YouTube требуется специальное обращение, но есть решение! Используйте FitVids.js: https://github.com/davatron5000/FitVids.js

Answer 2

В 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 и могут быть применены к любому существующему классу или элементу в CSS с использованием @include flex-video-container();

ПРИМЕЧАНИЕ. Это также работает для последней версии ZURB Foundation for Sites v6.