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

Html+Css   |   17 Comentarios

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.

¿Cómo insertar un vídeo en tu web correctamente?

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

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.

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

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.

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?

(87 votos, promedio: 3,89 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes