Come implementare un iframe di Youtube responsive con Twitter Bootstrap?

Question

Attualmente sto embedding video di Youtube con il seguente codice HAML in un sito basato Twitter Bootstrap:

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

Purtroppo, questo non risponde bene quando si ridimensiona il browser o su dispositivi mobili a causa della altezza statica.

Quale sarebbe un modo migliore (più dinamico e reattivo) per implementare questo iframe incorporato per Youtube?

Answer 1

Prova questa "Video CSS Responsive", funziona perfetto per me: 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

questo è probabilmente fatto meglio con jQuery: http://www.seanmccambridge.com/tubular/ o http://okfoc.us/okvideo/

Answer 3

ho implementato una soluzione CSS puro che funziona alla grande .

Ecco un esempio di codice a mio avviso utilizzando il codice iframe generato in YouTube.

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

Ecco un esempio di codice in un'altra vista, dove invece di usare iframe ho usato il campo corpo generato dalla gemma autohtml, che viene utilizzato per l'incorporamento diversi tipi di collegamenti video in una pagina web. Ciò è utile se si dispone di un modello in cui un collegamento deve essere incorporato dinamicamente nella stessa pagina Web.

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

Ecco il codice 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%; } 

Ecco il video di YouTube che spiega in dettaglio come funziona il codice e dare uno o due post del blog di controllare.

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

Answer 4

Solo per automatizzare @Bart's answer, ho creato un semplice Javascript snipped che avvolge automaticamente iframe elementi all'interno <div class="flex-video">

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

Answer 5

Bootstrap 3.2.0 viene fornito con un diversi miglioramenti e un gran numero di correzioni di bug Un framework per la creazione di siti Web con un design reattivo, Bootstrap mancava il supporto per gli elementi reattivi e gli elementi aggiunti in questa ultima versione.

Il codice HTML per un YouTube 16 reattivo: 9 video che regola la sua dimensione in base alla larghezza della pagina viene visualizzata in si presenta così:

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

Answer 6

Se si utilizza bootstrap, il metodo seguito è senza dubbio il modo più semplice per implementare un embed reattivo:

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

la documentazione può essere trovato qui: http://getbootstrap.com/components/#responsive-embed.