Inserción ligera de YouTube y Vimeo: generador de fachada
Pegue los enlaces de los vídeos y obtendrá un bloque listo que muestra una vista previa y carga el reproductor solo tras un clic. Cero bibliotecas externas: todo lo necesario está dentro del código generado.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, privados vimeo.com/ID/HASH. La marca de tiempo ?t= / &start= se traslada a la fachada.
Datos opcionales separados por una barra vertical: URL | Título | URL de la miniatura.
An:Al o An/Al. Pasa a la propiedad CSS aspect-ratio.
hqdefault existe para cualquier vídeo. maxresdefault solo existe cuando el original se subió en 720p o más: de lo contrario la imagen sencillamente no se abrirá y el espectador verá un rectángulo vacío.
aria-label del botón y al title del iframe.
i.ytimg.com en YouTube: solo la devuelve la API de oEmbed, y no podemos hacerle una petición: la herramienta funciona sin red. Por eso, suba el fotograma a la biblioteca de medios del sitio y pegue el enlace. Sin él habrá un marcador de posición en degradado con un botón de play.
Pegue al menos un enlace para obtener el código.
Pegar en el bloque de Gutenberg «HTML personalizado». El bloque contiene <style> y <script>: si su rol no tiene el permiso unfiltered_html o hay un plugin de seguridad que recorta los scripts, la fachada mostrará la miniatura, pero el clic no funcionará.
El código se compone en su navegador. Ni el bloque generado ni la propia vista previa hacen ninguna petición externa: las imágenes de i.ytimg.com se muestran en la vista previa como direcciones, no se descargan.
Un solo vídeo incrustado cuesta más de un megabyte antes del primer clic
Un iframe estándar de YouTube carga alrededor de 1,3 MB en un par de decenas de peticiones a siete dominios ajenos, antes incluso de que el visitante haya decidido ver el vídeo. En una página con tres vídeos son tres veces más, y casi siempre es eso lo que estropea las métricas de velocidad en móvil. La fachada resuelve el problema sin rodeos: primero se muestra solo una imagen de previsualización con un botón de reproducción, y el reproductor real se inserta en el momento del clic. Antes del clic la página pesa un orden de magnitud menos. Existe una biblioteca popular para esto, pero todas las instrucciones aconsejan cargarla desde un CDN ajeno, es decir, quitar una petición externa y añadir otra. Aquí el código generado es totalmente autosuficiente: los estilos y el script van dentro del bloque. Hay un efecto adicional en la privacidad. El iframe estándar coloca cookies de seguimiento antes de cualquier visionado. El dominio youtube-nocookie.com lo aplaza hasta que empieza la reproducción, y la fachada hasta el clic. Para sitios dirigidos a público europeo, esto afecta directamente a los requisitos de consentimiento de cookies.