25Ago

Cómo hacer un video YouTube responsive?

Quizás una sencilla tarea de insertar un video embed con un iframe en nuestro sitio responsive, se puede transformar en algo muy difícil ya que tenemos que ingresar el tamaño del alto y ancho en la etiqueta. Para eso voy a enseñarle un práctico truco que nos permitirá insertar un video de YouTube de forma responsive.

Partiremos de la base que tienen su iframe listo que entrega YouTube para insertarlo en su web. Ocuparemos este iframe para hacer el ejemplo:


<iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Luego, vamos a eliminar el width y height del iframe, porque se le vamos dar el ancho y largo por CSS. Por lo que debería quedar así.


<iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Ahora bien, como ya les comenté recién, esto se hace insertando unos parámetros en CSS que harán todo el trabajo, fíjense bien:


/* DIV donde se alojará el iframe de YouTube */
responsive-embed-youtube {
position: relative;
padding-bottom: 56.25%; /* mantiene la vista en 16:9 */
padding-top: 25px;
height: 0;
}
/* Ancho y Alto del iframe al 100% */
responsive-embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
}

Finalmente, si queremos unir el iframe de YouTube con nuestro CSS debería quedar así:


<div class="responsive-embed-youtube">
    <iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Eso es todo, cualquier duda me consultan!

Share this Story

Leave a Reply

Your email address will not be published. Required fields are marked *

*

zentidoo.com ® 2015. Todos los derechos reservados