Seguro que después de insertar un vídeo de YouTube en WordPress, si el tema que utilizas no está preparado para ello, el vídeo no se adapta correctamente a los dispositivos móviles. El vídeo funciona perfectamente, pero la miniatura, antes de reproducir el vídeo, no se visualiza como nos gustaría.
Cómo hacer que los vídeos de YouTube en WordPress sean adaptables
Para esta modificación, o creación de un nuevo shortcode, es fundamental trabajar sobre un tema hijo o Child Theme, los que usen Génesis no tendrán problemas, pero para el resto, podéis ver las ventajas de tener un tema hijo y cómo hacerlo pinchando aquí.
Algunas ventajas de tener un tema hijo son estas:
- Modificar determinadas zonas de la plantilla
- Crear traducciones
- Modificar estilos de página
- Crear shortcodes
- Mantener los cambios tras las actualizaciones del tema.
Si no queréis utilizar un shortcode y preferís escribir todas las líneas de código, no es necesario crear un Child Theme.
El principio del problema
No pasa en todos los temas de WordPress, cada vez hay más que ya incorporan esta función responsive para los vídeos, pero el que no lo tiene podrá adaptarlo con este sistema.
Antes había que insertar el código completo que ofrecía Youtube para colocar el vídeo a través de HTML, pero esto ha cambiado y para insertar los vídeos de YouTube en WordPress basta con insertar la url corta que encontramos en la pestaña compartir.
Pero colocando simplemente el código de YouTube no conseguimos que se adapten a cualquier dispositivo, ya sea tablet, móvil o pantalla de ordenador.
Para poder manipularlo a nuestro antojo, debemos insertar primero el vídeo en una capa, caja o contenedor con las etiquetas <div> que nos permita ajustarlo de forma automática, y posteriormente aplicar unos estilos CSS que hagan el trabajo.
Código HTML para colocar el vídeo de YouTube en WordPress
Este código tenemos que insertarlo, en las páginas o entradas, en formato de texto plano a través de la pestaña "HTML" y no desde la pestaña "Visual". Así el vídeo se adaptará a las especificaciones que apliquemos a estas capas <div>.
1 2 3 | <div class="ytdelimitador"> <div class="ytcontenedor">url del vídeo de YouTube</div> </div> |
Los nombres "ytdelimitador" y "ytcontenedor" son los que harán referencia a los estilos que apliquemos posteriormente, podéis cambiar estos nombres por los que queráis, siempre que sean los que uséis al crear el código CSS.
Adaptar el vídeo con estilos CSS
Desde la versión 4.7 de WordPress, podemos aplicar estilos CSS desde el "personalizador" del tema, sin necesidad de editar el archivo de los estilos, lo cual es un aporte muy valioso para poder personalizar nuestra web y no perder los cambios con las futuras actualizaciones del tema.
Desde el menú "Apariencia > Personalizar", editamos las opciones del tema, y desde la pestaña "CSS adicional" aplicamos los cambios visuales a las etiquetas que hemos creado antes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .ytdelimitador { width: 100%; max-width: 620px; margin: auto; } .ytcontenedor { height: 0px; width: 100%; max-width: 620px; padding-bottom: 56.25%; position: relative; } .ytcontenedor iframe { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } |
Copiando este código en el espacio para el CSS adicional, estamos diciendo cómo debe comportarse cada caja o <div> que contiene el vídeo.
- .ytdelimitador: Esta capa la centramos en la página para que tenga el mismo margen a derecha e izquierda, y establecemos una anchura máxima, que en este caso he puesto en 620px. Este valor lo podéis cambiar para adaptarlo a vuestras necesidades.
- .ytcontenedor: Esta capa la establecemos con una anchura del 100%, pero que está limitada por la capa anterior para que no sobrepase los 620px (o el valor que pongáis). Aplicamos una proporción de pantalla de 16:9 (formato de los vídeos de YouTube), obtenida con una sencilla "regla de 3", tomando como datos la resolución HD, si 1920px es el 100%, entonces 1080px son 56,25%.
- .ytcontenedor iframe: Podríamos poner sólo "iframe", pero si tenemos algún código que contenga esta etiqueta y no sea un vídeo, le afectaría también los cambios. Básicamente decimos al vídeo de YouTube en WordPress que se adapte al 100% tanto en anchura como en altura y que se ajuste a la esquina superior izquierda.
Crear el SHORTCODE de YouTube en WordPress
Este ya es un pasa adicional, pero que nos ayudará a ser más productivos y perder menos el tiempo a la hora de adaptar los vídeos y convertirlos en responsive.
Para realizar este apartado, y mantener los cambios que hagamos en el archivo funtions.php, necesitamos crear un tema hijo. Así, si nos equivocamos o realizamos algo mal, siempre tendremos el archivo original intacto.
Editamos el archivo "funtions.php" del tema hijo desde el menú de administración, "Apariencia > Editor", o descargando el archivo a través de un cliente FTP.
Si elegimos la opción de editarlo desde la administración de WordPress, hay que fijarse bien que esté seleccionado el tema hijo, y marcamos el archivo funtions.php para insertar el siguiente código al final del todo.
1 2 3 4 5 6 7 8 9 10 11 12 13 | //* Vídeo Youtube adaptable function ytresponsive($atts,$content=null,$code="") { $return=' <div class="ytdelimitador"> <div class="ytcontenedor"><iframe src="'; $return.=$content; $return.='" iframe=""> '; return $return; } add_shortcode('videoyt','ytresponsive'); |
Con estas líneas reducimos todo el código HTML a una sola línea. En las clases de las etiquetas CSS debemos poner el nombre que elegimos al principio para cada una de ellas.
En la línea de "function", escribimos el nombre que va a tener la función, yo he puesto "ytresponsive", pero se puede cambiar siempre que también lo cambiéis en la última línea del código.
El nombre que utilizaremos para el shortcode, lo decidimos en la línea final, en "add_shorcode", en esta ocasión yo he puesto "videoyt", pero, como siempre, podéis cambiarlo.
Para insertar un vídeo de Youtube con los shortcodes, tenemos que coger la url del vídeo en el apartado "Insertar", no vale la url corta.
Ahora podéis observar la diferencia entre lo que se veía antes en un móvil y lo que veréis a partir de utilizar este código.
El código que muestro en este tutorial lo he implementado en un plugin que todos los miembros de la ZONA PREMIUM pueden descargar gratuitamente. Es exactamente el mismo que uso en mi blog.
Puedes ver cómo se instala y funciona en este artículo.
¡Muchas gracias! ¡Genial explicado!
Hola, tendrá un tutorial de como hacerlo con vídeos de dailymotion ? saludos
Hola Ylde, en este enlace te dejo el artículo al que en unos días añadiré el vídeo explicando cómo insertar los vídeos de Dailymotion. Si tienes alguna pregunta. aquí me tienes.
https://www.ingresosviaweb.com/insertar-videos-de-dailymotion/
Creo que he seguido todo los pasos biene pero al aplicar el codigo en la parte HTML , en la parte visual no se ve el video y aparece esto: [videoyt] la url del video [/videoyt]
¿Me he saltado algún paso?
Si es verdad que en funcions,php no me aparece ni la mitad de código que a ti
Hola Jose, en la parte visual siempre verás el código y el shortcode como me indicas, pero en la parte frontal, que es la que ve el usuario cuando visita la web, debería aparecer el vídeo adaptado al tamaño de la ventana. Los shortcodes lo que hacen es condensar programación para no tener que escribirla, pero sólo lo interpreta el servidor cuando lo muestra en el front-end o parte frontal.
¿Cuando ves la web como usuario se adapta el vídeo?
Esto te pasará con todos los shortcodes que utilices. Respecto al funtions.php, depende de la plantilla que utilices.
hola Juan a mi me pasa que coloco el codigo en el editor funtion.php y al colocar el shortcode me sale el video pequeño de una vez, al verlo como usuario veo que no me quedo responsive yo uso el tema virtue, claro en mi caso cree el tema hijo como virtue child espero me puedas ayudar
Hola, Mes pasa exactamente lo mismo.
Hola Esteban,
He actualizado el artículo ya que estaba un poco anticuado, el vídeo aún es el viejo, pero también lo actualizaré en estos días.
YouTube y WordPress han cambiado desde que lo publiqué, y aunque todavía funcionaba el método antiguo, ahora se pueden insertar los vídeos con la url corta que ofrece YouTube.
He realizado el proceso en varios temas y funciona perfectamente. He modificado un poco el código que hay que colocar en funtions.php para no limitar el tamaño al principio.
Si tienes alguna duda, puedes comentármela.
Gracias! me ha sido de gran ayuda. Saludos.