Insertar vídeos de Dailymotion en WordPress adaptables

por | 0 Comentarios

Todos conocemos la popularidad con la que cuenta Youtube, y por eso el primer tutorial sobre cómo insertar un vídeo adaptable en WordPess lo realicé sobre esa plataforma. Pero existen otras muchas, como Vimeo o Dailymotion, por poner algún ejemplo. En esta ocasión vamos a ver cómo podemos insertar vídeos de Dailymotion en WordPress y que estos sean adaptables.

Suscríbete a mi canal:

Cómo insertar vídeos de Dailymotion ajustables en WordPress

Hay dos maneras de hacerlo, la fácil y la menos fácil, pero ninguna de las dos difícil. La primera es instalar un plugin que realice todo el proceso por nosotros y la otra es crear el shorcode nosotros mismos.

Desde mi experiencia, los plugins no siempre funcionan correctamente como nos gustaría, dependiendo del tema que estemos utilizando, los plugins que tengamos instalados, las actualizaciones periódicas y la compatibilidad de WordPress, puede que no podamos utilizarlos.

Además, todos sabemos que los plugins añaden más código del que realmente necesitamos. Pero si funcionan correctamente ahorran muchos quebraderos de cabeza.

La otra opción, es añadir un código al archivo «funtions.php» y añadir estilos al archivo .css, y para no perder los cambios tendremos que tener configurado un tema hijo sobre el que hacer estos cambios.

 

El problema de insertar los vídeos directamente en WordPress

Si copiamos el código que nos da la plataforma Dailymotion (o cualquier otra), estos se insertan con el tamaño que nosotros establezcamos desde el principio a la hora de copiar el código, y no se adaptan cuando cambia el tamaño de la pantalla.

Insertar vídeos de Dailymotion en WordPress. Código de inserción

 

Si pegamos la URL del vídeo directamente en WordPress, tampoco conseguimos que sea responsive. Así sin más, vamos manos a la obra y solucionar este problemilla.

 

Insertar vídeos de Dailymotion con un plugin

El plugin «Shortcodes Ultimate» instala un conjunto de shorcodes que aumentan las posibilidades de diseñar las páginas y las entradas, creando varias columnas, contenido desplegable, pestañas… y la posibilidad de insertar vídeos de Dailimotion, Vimeo, Youtube, y vídeos propio de forma adaptable o responsive.

Insertar vídeos de Dailymotion en WordPress. Shortcodes ultimate

 

La forma de utilizarlo es muy sencilla, ya que instala una nueva pestaña en el editor de texto con la que podemos configurar de forma rápida y sencilla cualquiera de los shortcodes que incorpora.

Como estamos contando la manera de insertar vídeos de Dailymotion, utilizaremos el shortcode específico para ello.

Insertar vídeos de Dailymotion en WordPress. opcion dailymotion

Al pinchar sobre la opción de los vídeos de Dailymotion, se abrirá una nueva ventana con varias opciones, las seleccionamos según nos convenga.

De entre todas, y si buscamos que se adapte a los dispositivos, tendremos que poner «SI» en la opción responsive.

  • URL de la página de Dailymotion que contiene el vídeo
  • Anchura y altura del reproductor (sólo funciona si marcamos que NO sea responsive)
  • Opción Responsive
  • Reproducir automáticamente
  • Color del fondo para los elementos de control
  • Color para los elementos de control en primer plano
  • Color para los elementos destacados
  • Mostrar logo
  • Calidad a la que se reproducirá el vídeo, si es posible
  • Mostrar vídeos relacionados al terminar la reproducción
  • Mostrar la información del vídeo, (título/autor) al comienzo
  • Añadir estilos CSS

 

Insertar vídeos de Dailymotion con un shortcode personalizado

Puede ser que no funcione el plugin con los vídeos y no podamos insertarlos de esa forma, pero podemos crear nuestro propio código y adaptarlo a un shortcode que nos facilite la colocación del vídeo.

 

Crear el código HTML de inserción del vídeo

Antes de crear el shortcode, tenemos que escribir el código HTML que necesitamos para poder adaptarlo con los estilos CSS adecuados. No os asustéis que es tan sólo asignar un nombre a unas cajas para poder modificarlas según cambie el tamaño de la pantalla.

Insertar vídeos de Dailymotion. Código html

 

Este código es necesario para poder tener una referencia a los estilos, en esta ocasión he utilizado los nombres «dlmlimitador» y «dlmcontenedor«, podéis cambiarlos por los que más os gusten o elegir unos personalizados.

 

Adaptar el vídeo con estilos CSS

Los estilos CSS los aplicaremos en el «personalizador» del tema sin necesidad de editar el archivo de los estilos, una opción muy valiosa para poder personalizar nuestra web y no perder los cambios con las futuras actualizaciones del tema.

En el menú «Apariencia > Personalizar«, nos dirigimos a las opciones del tema, y en la pestaña «CSS adicional» añadimos el código de los cambios visuales, a las etiquetas que hemos creado en el código HTML.

YouTube en WordPress. Personalizador

 

Copiando este código en el espacio para el CSS adicional, estamos diciendo cómo debe comportarse cada caja que contiene el vídeo.

  • .dlmlimitador: Decimos a esta capa que se centre sobre el ancho total de la página y que tenga una anchura máxima de 620px. Este valor lo podéis modificarlo a vuestras necesidades.
  • .dlmcontenedor: Indicamos que la capa, que está limitada por la capa anterior, ocupe una anchura del 100% sin sobrepasar los 700px (o el valor que pongáis). Y que tenga una proporción de pantalla de 16:9, cuya proporción de altura es un 56,25% en relación a la anchura.
  • .dlmcontenedor 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. Estamos diciendo al vídeo que se adapte al 100% de la caja donde se encuentra, en anchura y en altura, y que se ajuste a la esquina superior izquierda.

 

Crear el SHORTCODE de YouTube en WordPress

Podríamos dejarlo aquí, ya que hemos conseguido nuestro objetivo, pero con un shortcode, insertar vídeos de Dailymotions sería más rápido y menos complicado, ya que sólo tendríamos que colocar el código del vídeo entre dos palabras.

Como dije al principio, para mantener los cambios que hagamos en el archivo funtions.php, necesitamos crear un tema hijo. Si nos equivocamos o realizamos algo mal, siempre tendremos el archivo original intacto del tema padre.

Editamos el archivo «funtions.php» desde el menú de administración, «Apariencia > Editor«. Nos fijamos que esté seleccionado el tema hijo y marcamos el archivo 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 y sólo debemos añadir el código del vídeo. En las clases de las etiquetas, 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 «dlmresponsive«, 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 «ajustarvideo«, pero, como siempre, podéis variarlo.

De esta forma, cada vez que quieras insertar vídeos de Dailymotions en WordPress, y que sean responsives, sólo hay que poner el código del vídeo, que proporciona la plataforma, entre los shortcodes.

 

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.
[su_row]
[su_column size=»1/2″]
SIN SHORTCODE RESPONSIVE
[/su_column]
[su_column size=»1/2″]
CON SHORTCODE RESPONSIVE
[ajustarvideo]x5g6bot[/ajustarvideo] [/su_column]
[/su_row]
 

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.

0 comentarios

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
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido