# Contenido incrustado Un póster y un botón de reproducir en lugar de un reproductor de otro sitio, que se carga solo cuando el visitante lo pide, tras el consentimiento. ### Problemas conocidos Dos cosas que conviene saber antes de fiarse de él. - La pregunta no tiene un botón para retirar «Reproducir siempre». Para que un visitante pueda retirarlo, ofrece la categoría como casilla en el aviso de cookies, con su botón de cambiar: la respuesta del aviso se fusiona en el mismo registro, y su evento `luz:consent` indica lo retirado en `detail.withdrawn`. - No se ha probado con un lector de pantalla. ### Copiar el marcado El enlace es la página sin JavaScript, así que escríbelo como la página a la que quieres que llegue el lector: apunta al vídeo donde está alojado. `src` es la dirección del reproductor, completa, tal como la da el otro sitio (aquí, la dirección de incrustación con privacidad reforzada que YouTube da para un vídeo); LUZ no construye ninguna dirección ni nombra a ningún proveedor. El póster es tu propia imagen, en tu propio servidor: un póster pedido al otro sitio lo alcanzaría al cargar la página. `catalog.min.js` carga el archivo propio del elemento, `embed.min.js`, cuando recorre la página; una página sin `catalog.min.js` carga ese archivo por su cuenta. Embed markup ```html Play video: John Young’s Lunar Salute on Apollo 16 ``` Tus scripts pueden preguntar qué cargaría el elemento: Script that reads the address ```js import { playerURL } from "@luz-ds/catalog/embed"; // The address the element would load, or null when it stays a link const url = playerURL(document.querySelector("luz-embed")); ``` ### Variantes y opciones No hay variantes. La proporción es una propiedad y los puntos de extensión son atributos. - ``: El elemento personalizado que define el módulo: un bloque con la proporción del marco. Se conecta solo al añadirse a la página - `src`: Obligatorio. La dirección completa del reproductor, escrita por ti: `https:` o del mismo origen que la página. Cualquier otra (`javascript:`, `http:` de otro origen, un error de escritura) deja el enlace - `consent`: El nombre de una categoría del [consentimiento para cookies](https://nandovejer.github.io/luz/es/docs/catalog/cookie-consent/) (una letra minúscula y después minúsculas, dígitos o guiones, 32 como máximo). Mientras no se conceda no se pide nada al origen del reproductor, y un clic pregunta primero. Sin bloque de pregunta y sin la categoría concedida, se queda como enlace - `data-luz-consent-key`: La clave de almacenamiento de la elección, que debe empezar por `luz-`; por defecto `luz-consent`, la del aviso - `data-luz-consent-days`, `data-luz-consent-policy`: Se leen del [aviso de cookies](https://nandovejer.github.io/luz/es/docs/catalog/cookie-consent/) de la página, si lo hay: cuántos días dura «Siempre» (180 por defecto, 395 como máximo) y la versión de la política mostrada, que se guarda con la elección - `--luz-embed-ratio`: La proporción del marco, `16 / 9` por defecto. Se fija en el elemento: `style="--luz-embed-ratio: 4 / 3"` - `.luz-embed__link`: El enlace de la página sin JavaScript: contiene el póster y el título, y ocupa todo el marco. Con JavaScript pasa a ser un `button.luz-embed__play` con los mismos hijos, así que su nombre no cambia - `.luz-embed__poster`, `.luz-embed__title`: Tu imagen, que cubre el marco, y el título, sobre un velo en la parte inferior - `.luz-embed__ask` with `data-luz-embed-ask`: Opcional, con `hidden` en el marcado: la pregunta que se muestra cuando el clic necesita un consentimiento que no está. Sus botones tienen un `value`: `once`, `always` o `cancel` - `data-luz-state`: Lo escribe el script: `ready`, `ask` o `playing`. Dale estilo, pero no lo fijes - `playerURL(el)`: Lo exporta `@luz-ds/catalog/embed`: la dirección validada del elemento, o `null` ### Cómo funciona CSS de `@luz-ds/catalog` y un archivo propio, `@luz-ds/catalog/embed` (`dist/embed.min.js`, menos de 1,5 kB comprimido), que define ``. No usa ninguna biblioteca, y el script del reproductor, si lo tiene, se ejecuta solo dentro del marco, una vez cargado. Un vídeo o un audio nativos no lo necesitan: usa el [reproductor](https://nandovejer.github.io/luz/es/docs/components/player/). Esto es para lo que solo otro sitio puede mostrar. - **Antes del clic:** la página contiene un póster y un botón, y no pide nada al otro sitio. Cuando el puntero pasa sobre el botón, o el foco llega a él, se avisa al navegador de que abra una conexión con el origen del reproductor (un `preconnect`, una vez por origen), salvo que el sitio quiera consentimiento y no esté concedido. - **El clic:** si nada necesita consentimiento, o está concedido, se escribe el marco con permiso de `autoplay` y el foco entra en él. Si hace falta consentimiento, la pregunta se muestra en su lugar y el foco va a su primer botón. - **La pregunta:** `value="once"` reproduce este vídeo. `value="always"` lo reproduce y guarda la categoría, como hace el aviso de cookies, en `localStorage` como `{"version":1,"expires":…,"asked":[…],"granted":[…],"given":"…"}`, fusionado en el registro que ya hay para que se conserven las categorías del aviso, emite `luz:consent` en `document` y desbloquea todos los demás contenidos incrustados con esa categoría. `value="cancel"` vuelve al póster, con el foco en su botón. Escape no hace nada; el botón que cancela es la vuelta atrás. - **El marco:** tiene el título del vídeo, `allow` para las funciones que usan los reproductores, `allowfullscreen` y `referrerpolicy="strict-origin-when-cross-origin"`, que algunos reproductores necesitan para aceptar la incrustación. - El script no escribe ningún texto: cada palabra está en tu marcado, en el idioma de la página. Un servidor que construya tus páginas puede escribir `src` y guardar el póster al guardar el contenido, para que el lector nunca contacte con el otro sitio antes de elegirlo. ### Sin JavaScript El póster es un enlace con un título visible que abre el vídeo donde está alojado, y la pregunta queda oculta. Hace lo mismo cuando `src` no es válido, y cuando la categoría no está concedida y no hay pregunta que hacer. ### Teclado y ARIA - **Teclas:** Tab llega al botón; Intro o Espacio lo pulsan, como en cualquier botón. En la pregunta, Tab recorre sus botones. Escape no hace nada. - **Nombre:** el botón tiene el nombre del enlace al que sustituye: las palabras ocultas «Play video:» y luego el título. - **Foco:** al primer botón de la pregunta cuando se muestra, al marco cuando se carga el reproductor, de vuelta al botón con No reproducir. Cuando el reproductor está en el marco, sus teclas y controles son los del otro sitio, y la página no puede alcanzarlos. - **Idioma:** la pregunta y los nombres son tuyos, en el idioma de la página. Los del reproductor son los del otro sitio. ### Cuándo usarlo Úsalo para un vídeo, un mapa o cualquier reproductor que una página toma de otro sitio. Cargar un marco así envía la dirección del lector a ese sitio, y su script pesa más que el resto de la página; un póster y un botón cuestan una imagen. ### Cuándo no usarlo No lo uses para un vídeo o un sonido que alojas tú: eso es el [reproductor](https://nandovejer.github.io/luz/es/docs/components/player/), que tiene controles con estilo de LUZ y un teclado que LUZ prueba. - No lo uses para un enlace a una página que resulta tener un vídeo: eso es una [tarjeta](https://nandovejer.github.io/luz/es/docs/components/card/) o un enlace. - No lo uses para ocultar un marco que el lector nunca pidió: se carga solo tras un clic. Sustituye al código de iframe que te da el otro sitio y a los scripts de fachada de un proveedor. No se quita nada de LUZ.