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.
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.
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.
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.
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.
1 2 3 | <div class="dlmlimitador"> <div class="dlmcontenedor">CÓDIGO IFRAME DEL VÍDEO</div> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .dlmlimitador { width: 100%; max-width: 700px; margin: 20px auto; } .dlmcontenedor { height: 0px; width: 100%; max-width: 700px; padding-top: 56.25%; position: relative; } .dlmcontenedor 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 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.
1 2 3 4 5 6 7 8 9 10 11 12 | //* Vídeo Dailymotions adaptable function dlmresponsive($atts,$content=null,$code="") { $return=' <div class="dlmlimitador"> <div class="dlmcontenedor"><iframe width="100%" height="100%" frameborder="0" src="//www.dailymotion.com/embed/video/'; $return.=$content; $return.='" allowfullscreen="allowfullscreen"></iframe></div> </div> '; return $return; } add_shortcode('ajustarvideo','dlmresponsive'); |
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.
1 | [ajustarvideo]x5g6bot[/ajustarvideo] |
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.
Instalar WordPress como multisitio para administrar varias webs- Divi Cloud, el diseño de páginas web en la nube
- Añadir funciones personalizadas en WordPress sin usar un tema hijo
- Quitar el link principal de un menú desplegable en WordPress
- Cómo destacar un texto o párrafo en WordPress sin plugins
- Si estás empezando, contrata un hosting de HOSTGATOR con HTTPS gratis
0 comentarios