Jak zaimplementować responsywny iframe z YouTube embed za pomocą Twitter Bootstrap?

Obecnie umieszczam filmy z Youtube z następującym kodem HAML w witrynie opartej na Twitterze: 

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

Niestety, to nie reaguje dobrze podczas zmiany rozmiaru przeglądarki lub na urządzeniach mobilnych z powodu statycznej wysokości.

Jaki byłby lepszy (bardziej dynamiczny i responsywny) sposób wdrożenia tego wbudowanego iframe dla Youtube?

Author: dialex, 2012-08-29
Source

6 answers

Wypróbuj ten "responsywny CSS wideo", działa idealnie dla mnie: 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>
 77
Author: Bart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-02 11:35:24

Zaimplementowałem czyste rozwiązanie CSS, które działa świetnie.

Oto przykład kodu moim zdaniem wykorzystującego kod iframe wygenerowany w YouTube.

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

Oto przykład kodu w innym widoku, gdzie zamiast używać iframe użyłem pola body wygenerowanego z Gem AutoHtml, które jest używane do osadzania różnego rodzaju linków wideo na stronie internetowej. Jest to dobre, jeśli masz model, w którym link musi być dynamicznie osadzony w tej samej sieci strona.

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

Oto kod 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%; }

Oto film na YouTube, który szczegółowo wyjaśnia, jak działa kod i daje jeden lub dwa posty na blogu, aby sprawdzić.

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

 11
Author: Pamela Cook - LightBe Corp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-25 21:17:30

Bootstrap 3.2.0 zawiera kilka ulepszeń i dużą liczbę poprawek błędów. Framework do tworzenia stron internetowych z responsywnym projektem, Bootstrap brakowało wsparcia dla responsywnych, a elements, funkcja dodana w tej najnowszej wersji.

Kod HTML dla responsywnego filmu YouTube 16:9, który dostosowuje swój rozmiar na podstawie szerokości strony, na której jest wyświetlany, wygląda następująco: 

On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
 3
Author: Iso Samuel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-11 15:18:27
 1
Author: neon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-28 21:01:48

Aby zautomatyzować @Bart ' s answer, stworzyłem prosty snipped Javascript, który automatycznie zawija iframe elementy w <div class="flex-video"> 

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});
 1
Author: Caumons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:45:28

Jeśli używasz Bootstrap, poniższa metoda jest bez wątpienia najprostszym sposobem na zaimplementowanie responsywnego embedu: 

<!-- 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>

Dokumentacja znajduje się tutaj: http://getbootstrap.com/components/#responsive-embed .

 1
Author: B Cronyn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-03 11:54:45