Cómo incrustar un vídeo de YouTube en html y hacerlo responsive
agosto 26, 2021
Una de las plataformas más visitadas para ver y compartir videos, es el famoso sitio web de YoTube y no sólo esto, ya que también puedes alojar los videos que desees de forma gratuita. Ahora, es posible que necesites incrustar un vídeo de YouTube en html y hacerlo responsive, de ser este tu caso, sigue leyendo porque veremos cómo hacerlo.
Pero, ¿Qué es hacer un video resposive?
Realizar un video responsive o adaptativo, es una técnica de diseño, donde se redimensiona los elementos de la web para que cumpla el objetivo de lograr la correcta visualización de una misma página en diferentes dispositivos electrónicos y con esto, ofrecer una mejor experiencia de los usuarios con la plataforma.
Ahora, es posible que pienses que un video que cuente con el 100% de ancho se redimensiona automáticamente a cada dispositivo y sin perder el diseño del mismo, pues esto no es así, ya que para que se adapte tu video a cada dispositivo, necesitas un código de incrustación de video de YouTube responsive.
Incrustar un video de YouTube en html y hacerlo responsive
YouTube ofrece la oportunidad de que incrustes un video en tu sitio web enriquecer el contenido que ofreces a tus usuarios y este tipo de acción es muy sencilla.
Como primer paso, debes buscar el video que deseas incrustar y hacerlo responsive, una vez lo identifiques, dirígete a la opción de Compartir que está localizado debajo del video en la plataforma. Una vez esto, se debe abrir una ventana indicando las diferentes plataformas a las que puedes compartir el video, entonces debes seleccionar el ícono de Insertar <>, luego debes ver otras opciones en las cuales puedes escoger la que más se ajuste a tus necesidades y luego dale clic en Copiar. Por último, cuando se seleccione de azul el texto de código HTML, esto te indicará que ya está copiado y ya es sólo pegarlo en tu sitio web.
Por otro lado, para que el video se vea responsive, del iframe debes borrar el alto y ancho del video; una vez realices esto, lo que sigue es crear una etiqueta denominada div con class responsive y es allí donde vas a incrustar el código del video modificado. Luego, en la etiqueta que dice <HEAD> añades otra etiqueta de estilo que diga <STYLE> con la CSS, entonces ya solo debes copiar y pegar ese código dentro de la etiqueta <HEAD> en tu página. De esta forma ya debes tener tu código HTML para que tu video se vea responsive en cualquier dispositivo.
Como puedes ver, esta acción es sencilla pero muy valiosa a la hora de compartir videos en tu sitio web, ya que de esta forma puedes ofrecer calidad y una buena experiencia a tus usuarios que estarán desde diferentes dispositivos, así que toma ventaja de esto y aprovecha.
