Caso 1: video subido a nuestro servidor
Editor clásico: "Añadir objeto", elegir o subir un video y seleccionar "Incrustar reproductor de medios". Después, podemos editarlo y acceder a más opciones.
Editor Gutenberg: insertamos el bloque "Video", seguimos las instrucciones y después, en la pestaña "Bloque", nos saldrán las opciones una vez insertado el video.
WordPress insertará el código necesario y ya no es necesario hacer nada más. El espacio ocupado por el video dependerá de su resolución pero, en cualquier caso, será «responsive» y se adaptará a todos los tipos de dispositivos.
Caso 2: video alojado en un servidor externo.
WordPress soporta un número bastante elevado de servidores y en este caso bastará con poner la URL del vídeo. Dicha URL debe estar sola en un párrafo y sin poner el hipervínculo. Ejemplo:
Caso 3: resto de vídeos.
En todos aquellos casos en los que no podamos o no queramos subir el video a nuestro servidor y no esté soportado por WordPress, solo nos queda comprobar si el sitio ofrece el código necesario para embeberlo en nuestra página.
Vamos a poner un ejemplo con una noticia del New York Times. Si hacemos clic con el botón derecho sobre el video, aparecen varias opciones. Una de ellas es la URL del video (Get Video URL) pero no nos funcionará con el método expuesto para el «Caso 2» y tendremos que seleccionar "Get Emebed Code". El símbolo que indica esa información suele ser </>. Y ahora es cuando nos topamos con el problemático «iframe».
<iframe title="New York Times Video - Embed Player" width="480" height="321" frameborder="0" scrolling="no" allowfullscreen="true" marginheight="0" marginwidth="0" id="nyt_video_player" src="https://www.nytimes.com/video/players/offsite/index.html?videoId=100000004632792"></iframe>
Digo problemático porque la anchura y altura del «iframe» solo se pueden especificar en píxeles lo que provoca que no se adapte a todos los dispositivos. Si vuestra plantilla es HTML5, es aconsejable eliminar del «iframe» las etiquetas que no son soportadas por dicha especificación.
La soluciones propuestas parten todas ellas del artículo Creating Intrinsic Ratios for Video de Thierry Koblentz y básicamente la solución «consiste en poner el “iframe” dentro un div contenedor y posicionar el iframe de forma absoluta respecto a este contenedor. Para mantener el aspect ratio, a este contenedor se le da una altura de cero y un padding-bottom en porcentaje en función del aspect ratio» (Cómo hacer un iframe responsive).
Todas las aportaciones pasan por establecer porcentajes concretos (dos a lo sumo) pero no todos los videos tienen las mismas resoluciones. Eso me ha llevado a crear un método personalizado:
1) Añadimos a la hoja de estilos de la plantilla que usemos los siguientes estilos:
.video-iframe {
position: relative;
height: 0;
overflow: hidden;
}
.video-iframe iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
2) Copiamos el código para embeber el video y tomamos nota de la anchura y de la altura.
3) Calculamos la proporción: ( altura / anchura) x 100
4) Pasamos de Visual a HTML y ponemos
<div class="video-iframe" style="padding-bottom: proporción%;"> <iframe ......></iframe> </div>
y sustituimos "proporción" por su valor (se usa el "punto" para separar los decimales).
De esta forma, el video siempre será «reponsive» con independencia de su resolución.