Incrustar vídeos de YouTube en WordPress tiene un precio: el iframe completo de YouTube carga entre 400 KB y 1 MB de JavaScript aunque el usuario nunca haga clic. Eso golpea directamente el LCP y el INP, dos de las tres Core Web Vitals que Google mide para el posicionamiento. Hay tres formas de mostrar miniaturas o embeds de YouTube que van de la más sencilla a la más ligera.
YouTube expone las miniaturas de cualquier vídeo de forma pública en una URL predecible. Para el vídeo con ID VIDEO_ID, las URLs disponibles son:
https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg — La miniatura en alta resolución (1280×720). Solo existe si el creador la subió expresamente.https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg — Alta calidad (480×360). Siempre disponible.https://img.youtube.com/vi/VIDEO_ID/0.jpg — Imagen por defecto (480×360), equivalente a hqdefault.https://img.youtube.com/vi/VIDEO_ID/1.jpg, 2.jpg, 3.jpg — Miniaturas secundarias (120×90).Estas URLs funcionan sin API key. Son ideales para mostrar previews ligeras antes de cargar el iframe.
Si solo necesitas insertar el vídeo en el contenido, el bloque de vídeo de YouTube de Gutenberg es la opción más directa. Desde WordPress 5.x incorpora carga diferida (lazy loading) por defecto: el iframe no se carga hasta que el usuario se aproxima al bloque. El código Gutenberg resultante es simplemente:
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=VIDEO_ID
</div>
</figure>
Lenguaje del código: HTML, XML (xml)La limitación: aunque tiene lazy loading, el iframe sigue siendo pesado cuando finalmente se carga. Si tienes varios vídeos por página, esta opción no es la más óptima.
La técnica clásica: mostrar la miniatura de YouTube como una imagen normal con un enlace al vídeo. El usuario hace clic y va a YouTube (o se abre en una ventana nueva). Cero carga de JS de terceros.
Puedes hacer esto directamente en Gutenberg con un bloque de imagen enlazada, o con un shortcode personalizado en functions.php:
/**
* Shortcode para mostrar miniatura de YouTube enlazada al vídeo.
* Uso: [youtube_thumb id="VIDEO_ID" size="hq" align="center"]
*/
function wpdirecto_youtube_thumb( $atts ) {
$atts = shortcode_atts(
array(
'id' => '',
'size' => 'hq', // hq=480x360, max=1280x720, 1/2/3=120x90
'align' => 'center',
),
$atts,
'youtube_thumb'
);
if ( empty( $atts['id'] ) ) {
return '';
}
$id = sanitize_text_field( $atts['id'] );
$sizes = array(
'max' => 'maxresdefault',
'hq' => 'hqdefault',
'0' => '0',
'1' => '1',
'2' => '2',
'3' => '3',
);
$img_key = isset( $sizes[ $atts['size'] ] ) ? $sizes[ $atts['size'] ] : 'hqdefault';
$img_url = 'https://img.youtube.com/vi/' . $id . '/' . $img_key . '.jpg';
$yt_url = 'https://www.youtube.com/watch?v=' . $id;
$class = 'align' . sanitize_text_field( $atts['align'] );
return sprintf(
'<a href="%s" target="_blank" rel="noopener"><img src="%s" alt="Ver vídeo en YouTube" class="%s" /></a>',
esc_url( $yt_url ),
esc_url( $img_url ),
esc_attr( $class )
);
}
add_shortcode( 'youtube_thumb', 'wpdirecto_youtube_thumb' );Lenguaje del código: PHP (php)Esta versión usa shortcode_atts() con el tercer parámetro (el nombre del shortcode) para permitir filtrar desde plugins, sanitiza las entradas y usa esc_url() / esc_attr() para el output. Más segura que la versión original de 2012.
La técnica de fachada (facade) muestra la miniatura de YouTube con apariencia de reproductor, y solo carga el iframe real cuando el usuario hace clic en el botón de play. Es la recomendación de Google Lighthouse para vídeos de YouTube.
Hay dos opciones sin necesidad de escribir código:
Si prefieres hacerlo a mano con CSS, la técnica básica consiste en usar la miniatura de YouTube como background-image de un elemento con un botón play superpuesto, y cargar el iframe via JavaScript solo cuando se hace clic:
.youtube-facade {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
background-color: #000;
cursor: pointer;
}
.youtube-facade img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
.youtube-facade .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
background: #ff0000;
border-radius: 10px;
}Lenguaje del código: CSS (css)| Método | JS cargado | Impacto en LCP | Interactividad |
|---|---|---|---|
| Iframe estándar | ~400 KB | Alto (negativo) | Reproductor completo |
| Bloque Gutenberg + lazy | ~400 KB (diferido) | Medio | Reproductor completo |
| Miniatura enlazada | 0 KB | Ninguno | Abre YouTube |
| Facade (Lite YouTube) | ~1 KB + 400 KB al clic | Mínimo | Reproductor en página |
Si tienes varios vídeos en una misma entrada o página, la técnica de fachada es la que menos daño hace al rendimiento. Para una sola inserción, el bloque nativo de Gutenberg con lazy loading es suficiente.
Para entender cómo afecta el rendimiento general de tu WordPress a las Core Web Vitals, puedes consultar la guía sobre cómo mejorar el rendimiento de WordPress. Y si quieres optimizar también las imágenes estáticas de tus entradas, el artículo sobre optimizar imágenes para SEO en WordPress cubre formatos modernos como WebP y AVIF. Para quienes gestionan varios sitios, los plugins de administración de WordPress pueden ayudar a automatizar estas tareas.
La miniatura maxresdefault.jpg (1280×720) solo existe si el creador del vídeo subió expresamente una miniatura personalizada en alta resolución. Si el vídeo tiene solo la miniatura autogenerada por YouTube, esta URL devuelve un error 404. La opción segura es usar hqdefault.jpg, que siempre existe.
No. Las URLs de miniaturas públicas de YouTube solo funcionan con vídeos públicos. Para vídeos no listados, la miniatura puede estar disponible si conoces el ID, pero no hay garantía. Los vídeos privados no exponen miniatura pública.
No. Las URLs del dominio img.youtube.com son públicas y no requieren autenticación. Si necesitas metadatos del vídeo (título, duración, número de visualizaciones), entonces sí necesitas la YouTube Data API v3, que requiere una API key gratuita de Google Cloud.
Un iframe de YouTube sin lazy loading en el above-the-fold de una página puede disparar el LCP a 4-6 segundos en conexiones lentas. Con lazy loading el impacto se reduce, pero si tienes más de dos iframes en una página, el INP (Interaction to Next Paint) también se ve afectado porque el JavaScript de YouTube bloquea el hilo principal. La técnica facade evita esto completamente hasta el momento del clic.
No directamente. get_the_post_thumbnail_url() devuelve la URL de la imagen destacada de un post de WordPress, que es un archivo subido a la media library. Si quieres usar una miniatura de YouTube como imagen destacada, tienes que descargarla primero, subirla a la media library con media_sideload_image() y luego asignarla como featured image. Es más trabajo, pero garantiza que la imagen está en tu servidor y no depende de YouTube.
