Как реализовать отзывчивый Youtube встраивать iframe с Twitter Bootstrap?

В настоящее время я встраиваю видео Youtube со следующим кодом HAML на веб-сайте Twitter Bootstrap:

.row
  .span12
    %iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }

К сожалению, это не очень хорошо реагирует при изменении размера браузера или на мобильных устройствах из-за статической высоты.

Какой был бы лучший (более динамичный и отзывчивый) способ реализовать этот встроенный iframe для Youtube?

Ответы

Ответ 1

Попробуйте этот "отзывчивый видео CSS", он отлично подходит для меня: https://gist.github.com/2302238

<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>

Ответ 2

Я реализовал чистое CSS-решение, которое отлично работает.

Вот пример кода в моем представлении с использованием кода iframe, сгенерированного на YouTube.

<div class="video-container">
  <iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>

Вот пример кода в другом представлении, где вместо использования iframe я использовал поле body, сгенерированное из Gem AutoHtml, которое используется для встраивания различных типов видео-ссылок в веб-страницу. Это хорошо, если у вас есть модель, где ссылка должна быть динамически встроена в одну веб-страницу.

<div class="video-container">         
  <span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>

Вот код CSS:

.video-container { 
   position: relative; /* keeps the aspect ratio */ 
   padding-bottom: 56.25%; /* fine tunes the video positioning */ 
   padding-top: 60px; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Вот видеоролик YouTube, в котором подробно объясняется, как работает код, и дайте одному или двум сообщениям в блоге.

http://www.youtube.com/watch?v=PL_R3zEjqEc

Ответ 3

Bootstrap 3.2.0 содержит несколько улучшений и большое количество исправлений ошибок. Основой для создания сайтов с отзывчивым дизайном Bootstrap не хватало поддержки отзывчивых элементов и элементов, добавленных в эту последнюю версию.

HTML для гибкого видео YouTube 16: 9, которое настраивает его размер в зависимости от ширины отображаемой страницы, выглядит следующим образом:

On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"

Ответ 5

Просто для автоматизации @Bart answer, я создал простой Javascript, который автоматически обертывает элементы iframe в <div class="flex-video">

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});

Ответ 6

Если использовать bootstrap, нижеприведенный метод, без сомнения, самый простой способ реализовать отзывчивое вложение:

<!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Документацию можно найти здесь: http://getbootstrap.com/components/#responsive-embed.