Jak zaimplementować responsywny element iframe osadzony w serwisie YouTube za pomocą Twitter Bootstrap?

Question

Obecnie jestem Osadzanie wideo Youtube z następującego kodu haml w miejscu Twitter Bootstrap bazie:

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

Niestety, ten nie reaguje podczas zmiany rozmiaru przeglądarki lub na urządzeniach mobilnych ze względu na wysokość statyczną.

Jaki byłby lepszy (bardziej dynamiczny i elastyczny) sposób wdrożenia osadzonego elementu iframe w serwisie Youtube?

Answer 1

Spróbuj "Responsive CSS wideo", to 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> 

Answer 2

Jest to prawdopodobnie najlepiej zrobić z jQuery: http://www.seanmccambridge.com/tubular/ lub http://okfoc.us/okvideo/

Answer 3

I wdrożone czystego roztworu CSS, który działa świetnie .

Oto przykład kodu w moim widoku za pomocą kodu iframe wygenerowanego w serwisie 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 świetle, gdzie zamiast używać iframe użyłem pole ciała wygenerowany z gem AutoHtml, który jest wykorzystywany do osadzania różnych typów połączeń wideo na stronie internetowej. Jest to dobre, jeśli masz model, w którym łącze musi być dynamicznie osadzone na tej samej stronie internetowej.

<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 wideo YouTube, który wyjaśnia w szczegółach jak kod działa i daje jeden lub dwa blogach sprawdzić.

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

Answer 4

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

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

Answer 5

Bootstrap 3.2.0 pochodzi z kilku ulepszeń i dużej liczby poprawki błędów. Platforma do budowania stron internetowych o responsywnym designie. W Bootstrap brakowało obsługi responsywnej oraz elementów, funkcji dodanych w najnowszej wersji.

HTML dla reagującego YouTube 16: 9 wideo, które dostosowuje swój rozmiar w zależności od szerokości strony jest wyświetlany w wygląda następująco:

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

Answer 6

przypadku korzystania bootstrap, poniższa metoda jest bez wątpić w najprostszy sposób, aby wdrożyć elastyczne Embed:

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

dokumentację można znaleźć tutaj: http://getbootstrap.com/components/#responsive-embed.