Crear [shortcode] responsive para insertar vídeos de YouTube en WordPress

por | 9 Comentarios

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.

Suscríbete:

 

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.

Insertar video de Youtube en WordPress

 

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>.

Nueva entrada o pagina para video de YouTube en WordPress

 

YouTube en WordPress. esquema

 

 

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.

YouTube en WordPress. Personalizador

 

 

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.

 

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.

URL larga de Youtube

 

YouTube en WordPress. Shortcode

 

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.

YouTube en WordPress. Antes y después

 

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.

[add_to_cart id=»1137″]

Puedes ver cómo se instala y funciona en este artículo.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

9 Comentarios

  1. Moisés

    ¡Muchas gracias! ¡Genial explicado!

    Responder
  2. Ylde

    Hola, tendrá un tutorial de como hacerlo con vídeos de dailymotion ? saludos

    Responder
  3. Jose

    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

    Responder
    • Juan

      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.

      Responder
      • Manuel

        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

        Responder
          • Juan

            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.

            Responder
  4. Ariel

    Gracias! me ha sido de gran ayuda. Saludos.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido