/ HTML

Incrustar video de Youtube o Vimeo y adaptarlo al ancho de tu layout

Como muchas veces he mencionado: El diseño web adaptable hoy en día no es una opción sino una necesidad. Por eso, les presento a continuación una muy buena técnica que servirá para incrustar video de Youtube y Vimeo para adaptarlos correctamente al ancho de nuestro layout.

La tarea de incrustar video en nuestras publicaciones o páginas web puede ser un asunto un tanto complicado para aquellos principiantes del Desarrollo Web Frontend, por eso me animé a ayudarles en este caso.

Para empezar, el insumo que nos dan ambos proveedores son una etiqueta <iframe> la cual tiene toda la información necesaria para que nuestros videos puedan ser incrustados dentro de nuestro layout.


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

Sin embargo, las propiedades de ancho y alto son fijas ocasionando el siguiente resultado:

Incrustar video de Youtube y Vimeo, ejemplo de ancho fijo

Cuando me enfrenté a este problema, lo primero que busqué fue modificar el Width y aplicarle un valor de 100% pensando que el height se me iba a escalar automáticamente respecto al ancho. Pero ohh sorpresa cuando observé este ridículo resultado:

Incrustar video de Youtube y Vimeo, ejemplo de ancho al 100% que no soluciona el problema

Como se observa, el resultado si amplía el ancho al 100% pero el alto no se ajusta correctamente a las necesidades del video.

Afortunadamente me encontré un par de soluciones para esto en alistapart.com que me ayudaron con este problema.

Lo primero que debe hacerse es insertar en nuestro CSS una clase llamada .videoWrapper con propiedades para la edición del bloque e insertar propiedades al selector iframe.

.videoWrapper {
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
margin-bottom: 25px; 
height: 0; 
}

.videoWrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

La creación de esta nueva clase, implica que debemos encapsular nuestro <iframe> en un <div> de la siguiente manera:

<div class=”videoWrapper”> <!-- Aquí pegas el código embed de Youtube o Vimeo --> <iframe width="420" height="315" src="https://www.youtube.com/embed/JQ9mzxGf_dk" frameborder="0" allowfullscreen></iframe> </div>

Pero aún sigue siendo una solución con problemas para usuarios con poca experiencia y sería un fastidio crear el <div> que encapsula el iframe cada vez que vamos a insertar un video; y eso sin mencionar que se nos puede olvidar el nombre de la clase “videoWrapper”.

Para dar solución y refinar un poco más el resultado, podemos hacer uso de JavaScript y jQuery con el fin de que primero se busque el iframe que contiene el video e incruste el <div> con la clase “videoWrapper” modificando el DOM.

Primero: Ubicamos el iframe de video: Asumo que el iframe está dentro de una etiqueta p

var iframe = $('p').find('iframe', {
src: '//player.vimeo.com' 
}, 
'iframe', {
src: '//player.vimeo.com' 
});

Segundo: Creamos el contenido del div en donde se va a insertar el iframe. Solo tiene la clase videoWrapper

var div = $('<div>', { class: 'videoWrapper' });

Tercero: a través del método wrap insertamos el iframe dentro del div

$(iframe).wrap(div);

Finalmente el código quedaría así

Incrustar video de Youtube y Vimeo con jQuery

Así logramos que nuestro video quede adaptado a nuestro layout.

Lo mejor. Es que solamente necesitamos insertar el código que nos proporcionan Youtube y Vimeo para que funcione y no estar siempre agregando el div que va a contener el video. Esto es muy útil para los que utilizamos WordPress para gestionar nuestros contenidos en el blog.

Incrustar video en WordPress

Y por último, si no sabes insertar el código del video en una entrada en WordPress, solo basta con hacer clic en vista HTML e insertar el video bajo el párrafo que solicites.

Incrustar video en WordPress

Incrustar video de Youtube o Vimeo y adaptarlo al ancho de tu layout
Share this

Subscribe to Esteban con Gafas