¿Cómo implementar un flotante iframe de Youtube con Twitter Bootstrap?

Question

Actualmente estoy Incorporación de vídeos de Youtube con el siguiente código HAML en un sitio basado Twitter Bootstrap:

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

Desafortunadamente, esto no responde bien al cambiar el tamaño del navegador o en los dispositivos móviles debido a la altura estática.

¿Cuál sería una mejor (más dinámica y receptiva) forma de implementar este iframe incrustado para Youtube?

Answer 1

probar este "CSS vídeo sensible", funciona perfecto para mí: 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

Este es probablemente el mejor hecho con jQuery: http://www.seanmccambridge.com/tubular/ o http://okfoc.us/okvideo/

Answer 3

he implementado una solución CSS puro, que funciona muy bien .

Aquí hay un ejemplo de código en mi vista usando el código iframe generado en YouTube.

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

Aquí es un ejemplo de código en otra vista en lugar de utilizar iframe He utilizado el campo del cuerpo generado a partir de la gema AutoHtml, que se utiliza para incrustar diferentes tipos de enlaces de vídeo en una página web. Esto es bueno si tiene un modelo en el que un enlace debe integrarse dinámicamente en la misma página web.

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

Aquí está el código 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%; } 

aquí está el vídeo de YouTube que explica en gran detalle cómo funciona el código y dar una o dos entradas del blog a la salida.

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

Answer 4

Sólo para automatizar @Bart's answer, he creado un simple Javascript cortó que se enrolla automáticamente iframe elementos dentro <div class="flex-video">

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

Answer 5

Bootstrap 3.2.0 viene con una serie de mejoras y un gran número de corrección de errores. Un marco para construir sitios web con un diseño receptivo, a Bootstrap le faltaba soporte para la característica de respuesta y elementos, agregado en esta última versión.

El HTML para un sensible YouTube 16: 9 de vídeo que ajusta su tamaño en función del ancho de la página que se muestra en el siguiente aspecto:

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

Answer 6

Si se utiliza de arranque, el método de abajo es sin poner en duda la forma más fácil de implementar un embed responde:

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

documentación se puede encontrar aquí: http://getbootstrap.com/components/#responsive-embed.