Cómo insertar un video de YouTube receptivo en el sitio web
Poner videos de YouTube en sitios web es común hoy en día. YouTube proporciona un código iframe para incrustar el video en sitios web. Sin embargo, el video renderizado a través de este código iframe no responde. Significa que en dispositivos pequeños como dispositivos móviles, tabletas, es posible que su video no se vea bien.
En realidad, sus videos incrustados de YouTube deben responder para una mejor experiencia de usuario. En este artículo, estudiamos cómo insertar videos de YouTube receptivos en su sitio web.
Encontré 3 posibles formas de lograr nuestro resultado final. Veámoslo uno por uno.
Insertar video de YouTube receptivo usando Bootstrap
Bootstrap es la herramienta de interfaz más popular que ayuda a desarrollar sitios receptivos. También proporciona una solución fácil para hacer que su video de YouTube sea receptivo.
Para comenzar, primero debe incluir el archivo CSS de Bootstrap de la siguiente manera. Si ya está utilizando Bootstrap en su proyecto, omita este paso.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Luego, use el siguiente HTML para incrustar su video usando un Bootstrap.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Reemplaza el marcador de posición VIDEO_ID con el ID de video real. Pruébelo y verá que su video funciona bien en dispositivos más pequeños.
Puede leer sobre este método de incrustación en la documentación de Bootstrap.
Video de YouTube receptivo con Fancybox
Esta opción es un poco diferente. Aquí, en lugar de mostrar el video directamente, mostramos una miniatura del video de YouTube. Y luego, al hacer clic en una miniatura, su video comenzará a reproducirse en la ventana emergente. Esto se puede hacer usando un fancybox.
Para utilizar Fancybox, debe incluir los siguientes archivos CSS y JS en su sitio web.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>Después de esto, coloque el código a continuación y listo.
<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
<img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>Inserciones Lite de YouTube
En el primer método, usamos código iframe. Mientras usa un iframe, el navegador tiene que descargar casi 800kB de datos para reproducir un video.
Usando fancybox, puede reducir esta carga. Pero nuevamente debes incluir su CSS y JS. Se recomienda agregar estos archivos a través de CDN para liberar la carga del servidor.
Mientras trabajaba en este tema, encontré un artículo que explica cómo incrustar videos de YouTube de una manera diferente. No necesita usar un iframe en la carga de la página ni debe incluir ningún archivo.
El artículo proporciona un código que cualquiera puede agregar fácilmente a su aplicación. Siga el artículo Lite YouTube Embeds y agregue el código como se sugiere.
Estas son las 3 formas posibles de incrustar un video de YouTube receptivo. Dependiendo de sus requisitos, puede elegir cualquiera de las soluciones.
Artículos relacionados
- Cómo obtener una lista de videos de YouTube de su canal
- Cómo usar la API de YouTube para cargar videos en el canal de YouTube
- Cómo obtener etiquetas de video de YouTube usando la API de YouTube