Como colocar un vídeo de YouTube responsive en tu web sin CSS
Queridos lectores sabemos lo importante que es la usabilidad de nuestros sitios web al momento de hacer la navegación en móviles, por tal razón los vídeos que colocamos en nuestros sitios deben adaptarse a los diferentes tamaños de pantalla, lo que es que sean responsive.
Cuando embebemos un vídeo con la opción que actualmente nos brinda YouTube de compartir e insertar obtenemos un código con medidas preestablecidas de la ventana o iframe donde se colocará por tal razón si el tamaño del monitor es menor no se podrá ver completo.
Para evitar esto vamos a seguir estos simples pasos, y lograr embeber un vídeo de YouTube en nuestro sitio web sin utilizar CSS:
- Primero debemos obtener el código de identificación de nuestro vídeo, esto es muy fácil solo debes dar clic en compartir y obtendrás una URL similar a esta: https://youtu.be/NnIiIRHuEtU copia la parte final después del / que esta marcada en amarillo.
- Luego copia este código:
<div style="text-align: center;">
<br /></div>
<br />
<br />
<header>
<h1 style="text-align: center;">
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/NnIiIRHuEtU" width="560"></iframe></h1>
</header><section style="text-align: center;"><br />
</section>
<script>
// Find all YouTube videos
var $videosYoutube = $("iframe[src*='www.youtube.com']"),
// el padre contenedor
$v_container = $("body section");
// iteramos todos los videos de youtube y guardamos sus proporciones
$videosYoutube.each(function () {
$(this)
.attr('proportion', this.height / this.width)
//removemos las dimenciones del video
.removeAttr('height')
.removeAttr('width');
});
// Cuando se redimenciona la ventana
$(window).resize(function () {
var container_width = $v_container.width();
// Resize all videos according to their own aspect ratio
$videosYoutube.each(function () {
var $el = $(this);
$el
.width(container_width)
.height(container_width * $el.attr('proportion'));
});
}).resize(); // invocamos el método a la carga
</script>
- Pega el código en el body de tu sitio web en la parte que deseas que aparezca, si trabajas en Blogger lo puedes pegar en un Gadget de HTML y si trabajas en Wordpress en un Widget de HTML.
- Reemplaza la parte que esta marcada en rojo, por el código que obtuviste de tu vídeo en YouTube, guarda el cambio y listo.
Deberás obtener un resultado similar a este:
De esta forma aquellos vídeos que coloques en tu sitio web tenga un visibilidad completa para todos tus navegantes.
¡Nos vemos pronto!
