Como insertar un Vídeo HTML5 Responsive desde Youtube o Vimeo en tu web.

Uno de los problemas que se encuentra todo diseñador web a la hora de crear su página web responsive es la inserción de vídeos html5 responsive en la misma. Por defecto, vimeo o youtube, principales plataformas de gestión de vídeos y mundialmente conocidas, nos insertan sus vídeos con un width y height predeterminado fijo que, cuando estamos desarrollando nuestra web para dispositivos tales como Tablets o Smartphone, nos crean problemas con el elemento. Más concretamente, al disponer de un contenedor responsive, conforme este se va escalando, el vídeo en sí “se monta por encima” de otros elementos, produciéndose una salida del flujo web responsive.

Es muy posible que otras plataformas que dan la posibilidad de insertar embeds videos no permiten la posibilidad de utilizar este truco, para ello necesitaremos un código javascript que nos lo solucione, pero funciona a la perfección en las dos plataformas de vídeo por excelencia. Youtube y Vimeo.

Empecemos por cómo compartir un vídeo en youtube o vimeo para poder insertarlo en nuestra web.

Youtube

insertar-video-youtube

 

 

Una vez elegido el vídeo que queremos insertar, pulsamos sobre el enlace de compartir debajo del vídeo. A continuación copiamos el código iframe que nos proporciona Youtube en la pestaña de insertar.

 

insertar

 

Vimeo

Se trata de el mismo proceso que para Youtube, simplemente en este caso el botón de compartir es el del avión de papel. Igualmente lo pulsaremos y copiamos el código iframe que nos suministra Vimeo

 

vimeo-share

 

Una vez obtenidos los iframe de los vídeos, llega la hora de insertarlos en nuestra web. Sea wordpress, joomla o cualquier página, el procedimiento es el mismo.

 

vimeo-iframe

Debemos de copiar nuestro código iframe suministrado. En mi ejemplo sería el siguiente:

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

Para comenzar empezaremos por limpiar el código suministrado, eliminando los atributos width y height. El código pasaría a tener la siguiente forma:

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

El siguiente paso es envolver el iframe en un contenedor con una clase que nosotros podremos modificar a nuestro antojo. En mi caso he envuelto el vídeo con una etiqueta div que le he puesto la clase “video-resposive”. El código pasaría a tener la siguiente estructura.

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

Para nuestro CSS debemos de utilizar el siguiente código:

<pre>

.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

</pre>

Lo que este código realiza es asumir la proporción de vídeos 16/9 , el ratio 56.25% y lo aplica como padding para mantener las proporciones del contenedor del vídeo.

Posteriormente al iframe, objet y embed le otrogaremos unos atributos que lo que realizarán es rellenar por completo el contendor que los envuelve, pudiendo así mantener la proporción en todos los dispositivos.

Si además queremos que nuestro contenedor sea mayor o menor, podemos modificar el padding-bottom de 56.25% pero siempre respetando las proporciones. ( Un pequeño truco para respetar las proporciones es abrir el inspector de código y sobre el padding bottom, aumentar o disminuir la cantidad, nunca insertar un número a nuestro antojo)

¿Te ha gustado el artículo?
1 Star2 Stars3 Stars4 Stars5 Stars (21 votos, promedio: 4,24 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

14 Comentarios

Santi Navarro

Hola buenas! Simplemente era una puntualización y es que hay unas dobles comillas en la clase de: , debería ser para que funcione correctamente. Gracias por el código facilitado

Martín Cappelli

Me funcionó perfecto, rápido y eficaz. Gracias por compartir!!

Futbol

Sos crack!!! Muchas gracias.

Jesús Guadalupe Flores

Muchas gracias por el aporte, en realidad me sirvió bastante. Yo sólo comparto que a mí el código me funcionó a partir de la siguiente modificación: quité el símbolo , entonces, quedó de la siguiente manera: <div class="video-responsive"> <iframe  src="https://www.youtube.com/embed/sOnqjkJTMaA" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>

Luis

Esta mal, porque el video siempre se ve pequeño, no funciona el widht del div contenedor cuando uno le da ancho al 100%

Alvaro Munoz

Gracias Dan por poner la solución al problema que surge cuando insertas un vídeo en html5 y te salen las dichosas franjas negras. Si deseas que te echemos una mano en cualquier aspecto de tu web, puedes enviarnos un mail y nosotros te llamamos. Un saludo

Alvaro Munoz

Hola Laura, Nos alegramos que hayas solucionado el problemilla que tenías sobre insertar tu Vídeo HTML5 Responsive desde Youtube. Si deseas que te ayudemos en temas de posicionamiento SEO o desarrollo tecnológico solo tienes que decírnoslo y nosotros te llamamos. Un saludo

Dan

Fantástico, Solo he tenido que ajustar el padding-bottom a 50% para eliminar las franjas negras en la parte superior e inferior. Gracias

Raul

Muuuuchas gracias por tu ayuda!!!! De verdad llevaba un buen rato tratando de solucionar el tema... y has dado en el clavo. Mil gracias!

Laura Oliver

Hola Muchas gracias por tu consejo. Ahora se ve perfectamente en mi teléfono móbil pero muy pequeño en la pantalla de el PC:  http://www.laura-oliver.com/2016/12/18/super-haul-sport/ ¿Cómo podría solucionarlo? Gracias de antemano por tu ayuda   Laura

Juan

Yo tengo el siguiente problema, cuando lo inserto funciona bien en chrome , pero en mozilla se ve de la siguiente manera -- > http://imgur.com/lO4z84q , he buscado por internet pero no encuentro como solucionarlo :(.

Jose Luis Salinas

Muchas gracias!!’ Me funciono de maravilla!!! Muchos éxitos. - www.laserocular.com.mx

Jose Luis Salinas

Muchas gracias!!' Me funciono de maravilla!!! Muchos éxitos.

Jaime Estrada

Saludos y gracias, solo estoy renovando esa pagina y necesitaba resolver esta cuestion. saludos excelente dia.