martes, 21 de mayo de 2019

Como colocar un vĂ­deo de YouTube responsive en tu web sin CSS

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! 

EnvĂ­ame un mensaje por:  Whatsapp   -   Facebook


No hay comentarios.:

Publicar un comentario

DĂ©jame tu comentario o consulta.