La comunicación a través de vídeos se ha convertido en un arma muy potente que deberíamos atender en cualquier tipo de página web.
Vamos a ver en este post una manera de hacerlo con WordPress y nuestra plantilla Divi a través de un slider de vídeos que podríamos utilizar en la página de inicio de nuestra web o en otra. Es decir, una lista de reproducción de vídeos en la página de inicio o home de la web.
DESCUENTOS DIVI
ÍNDICE DEL POST
- 1.- Módulo Slider vídeos de Divi (Control deslizante de Vídeo), Lista de reproducción de vídeos web
- 2.- Utilizar vídeos de youtube o Vimeo para una carga rápida y no perjudicar a nuestro hosting
- 3.- Opciones de configuración y diseño del slider de vídeos de Divi (Lista de reproducción de vídeos con Divi)
- 4.- Poner el slider de vídeos de anchura completa con Wordpress y Divi
- 5.- Cómo eliminar los vídeos sugeridos o relacionados de Youtube que aparecen al final de cada vídeo
1.- Módulo Slider vídeos de Divi (Control deslizante de Vídeo), Lista de reproducción de vídeos web
El módulo “Control deslizante de Vídeo” de la plantilla Divi nos va a permitir mostrar una lista de reproducción de vídeos en nuestro sitio web.
Crear un slider de vídeos o lista de reproducción en tu web
La estructura está formada por una ventana principal donde se muestra el vídeo que está en reproducción en ese momento y una serie de videos en miniatura que aparecerán en la ventana principal si hacemos clic sobre ellos.
Aparecerán inicialmente hasta 4 vídeos en miniatura pero se comportará como un carrusel en caso de que haya más videos que mostrar a parte de los 4 que aparecen inicialmente.
Pueden aparecer algunos errores de pre visualización del módulo cuando se trabaja con el builder visual, pero son solo errores de pre visualización. Es decir, que si realizamos vistas previas de la página que contiene el slider de vídeos, éstos se verán perfectamente.
2.- Utilizar vídeos de youtube o Vimeo para una carga rápida y no perjudicar a nuestro hosting
Con el slider de vídeos de la plantilla Divi podremos utilizar vídeos que subamos a nuestro wordpress (a nuestro hosting) o vídeos de plataformas como Youtube o Vimeo. De esta manera podremos cresar una lista de reproducción de vídeos en la web, tomando los vídeos del hosting o de YouTube
Mi recomendación es que siempre uséis vídeos subidos a Youtube o Vimeo, de esta manera el esfuerzo de carga del vídeo lo realizan dichas plataformas y no nuestro hosting.
Youtube y Vimeo tienes hosting muy potentes que permiten una rápida descarga de los vídeos, por el contrario los hosting compartidos que utilizamos para nuestra web no lo son tanto.
Para añadir los vídeos al slider, mi recomendación es hacerlo desde el Divi builder tipo backoffice y dejar el constructor visual para personalizar posteriormente las opciones de diseño. Vamos a ver como añadir un vídeo:
Una vez hayamos añadido el módulo “Control deslizante de vídeo” haremos clic en el icono de configuración del módulo.
En la pestaña “Contenido” veremos un enlace “+ Añadir nuevo vídeo” sobre el que haremos clic para añadir un vídeo.
Nos aparecerá un apartado Vídeo con dos elementos:
Vídeo MP4 URL: aquí podremos subir un vídeo (en formato MP4) a nuestro hosting haciendo clic en el botón subir vídeo para mostrarlo en nuestro slider o podemos directamente pegar la URL del vídeo Youtube o Vimeo que queremos añadir al slider de vídeos.
Video .WEBM: esta opción sirve para subir un vídeo en formato .WEBM a nuestro hosting y mostrarlo en el slider de vídeos.
Añadir un vídeo de youtube o Vimeo a la lista de reproducción de vídeos
3.- Opciones de configuración y diseño del slider de vídeos de Divi (Lista de reproducción de vídeos con Divi)
Vamos a ver en este apartado las principales opciones de configuración y personalización del módulo slider de vídeos de la plantilla Divi
3.1.- Elementos Slider Vídeos
En la pestaña “Contenido” de la configuración del módulo “Control deslizante de vídeos” encontraremos un apartado denominado: “Elementos” en el que tenemos las siguientes opciones:
i.- Mostrar Flechas: con esta opción podemos hacer que se muestren o no, dos flechas en la ventana principal que sirvan para cambiar el vídeo en reproducción por el siguiente o anterior de la lista.
ii.- Controles de control deslizante: aquí tenemos dos opciones. Si queremos que aparezcan las miniaturas de vídeos debajo de la ventana principal tendremos que seleccionar la opción “Usar pista de miniaturas”. Es decir, la lista de reproducción de vídeos se mostrará a través de vídeos en miniatura.
En caso de que queramos que en vez de los vídeos en miniatura que se muestren unos puntos para cambiar de vídeo tendremos que seleccionar “usar navegación con puntos”. Es decir, en la lista de reproducción no se mostraría una miniatura del vídeo siguiente.
Flechas y miniaturas del slider de vídeos
3.2.- Capa superpuesta de cada Vídeo
Divi tiene una opción para poner una “carátula” a cada uno de los vídeos que forman parte del slider de vídeos.
Es decir, podremos añadir una imagen a cada vídeo que se mostrará cuando el vídeo no se está reproduciendo.
Si utilizamos vídeos de youtube o vimeo es cierto que ya cuando subimos el vídeo a cualquiera de estas dos plataformas podemos también añadirle una carátula. Pero si no la subimos en su momento o usamos vídeos subidos directamente a nuestro wordpress, podemos usar esta interesante opción.
A.- Covertura en Pestaña Contenido
En la pestaña “contenido” de configuración del módulo verás un apartado denominado “Capa Superpuesta”.
Aquí tenemos un selector que sirve para activar o desactivar esta característica:
i.- Show image Overlays on Main Vídeo: Si ponemos el selector en “SI” el módulo mostrará las imágenes de cobertura que asignemos en cada vídeo. Por el contrario si elegimos “NO” se desactivará esta funcionalidad.
B.- Configuración específica de cada Vídeo
Una vez hayamos activado la funcionalidad de mostrar imágenes de cobertura o presentación para los vídeos según indicaciones realizadas en el apartado anterior, ahora nos toca ir a la configuración de cada vídeo.
En la pestaña “Contenido” de la configuración del módulo veremos que nos aparecen todos los vídeos que hemos añadido al módulo.
Si hacemos clic sobre el icono en forma de “engranaje” de uno de los vídeos veremos que nos aparecen una serie de opciones de configuración del vídeo.
El primer apartado, denominado “Vídeo” ya lo vimos en el punto “2” donde veíamos como subir los vídeos.
Ahora verás un segundo apartado denominado “Capa superpuesta” donde podremos subir la imagen que queramos que aparezca como portada o cobertura del vídeo que estamos configurando.
i.- URL de imagen de Cobertura: haremos clic en el botón “SUBIR” y elegiremos la imagen que queremos que haga de cobertura del vídeo.
Este proceso lo repetiremos para cada uno de los vídeos y guardaremos los cambios en la página.
3.3.- Otras opciones de personalización y diseño del módulo slider
i.- Fondo: podremos establecer un color de fondo específico o una imagen que se sitúe tras el slider de vídeos. Para ello iremos al apartado “Fondo” dentro de la pestaña “Contenido” de la configuración del módulo.
También podremos establecer imágenes de fondo o colores a través del fondo de la sección o fila que incluye el módulo de slider de vídeos.
ii.- Color icono de reproducción: para personalizar el color del icono de reproducción del vídeo iremos a la pestaña “Diseño” de la configuración del módulo y dentro del bloque “Colores de los controles” encontremos el selector “Color de icono de reproducción”.
iii.- Color hover sobre vídeos: podemos personalizar una capa semitransparente que se mostrará cuando pongamos el ratón sobre algún vídeo. Esta opción, que se denomina “Color superpuesto sobre imagen de miniatura” la encontraremos en la pestaña “Diseño” y bloque “Colores de los controles” de la configuración del módulo.
iv.- Resto: después tenemos las típicas opciones de movimientos, sombreados, márgenes, etc. como el resto de módulos del Divi Builder.
4.- Poner el slider de vídeos de anchura completa con WordPress y Divi
Habrás visto que te aparecen unos márgenes laterales del vídeo slider. Vamos a quitar esos márgenes para que el slider de vídeos tome todo el ancho de la interface disponible.
i.- Anchura completa fila: lo primero que haremos será ir a la configuración de la fila que incluye el módulo del slider de vídeos.
A continuación haremos clic en la pestaña “Diseño”. En el bloque con título “Tamaño” iremos a la siguiente opción:
“Hacer que esta fila tenga anchura completa” y pondremos el selector en “SI” y conseguiremos que el vídeo salga algo más grande.
ii.- Personalizar canalón: en la misma pestaña “Diseño” y bloque “Tamaño” que veíamos en el apartado anterior, buscamos la siguiente opción:
“El uso personalizado De Canalón De Ancho” y podremos el selector en “SI”.
En la siguiente opción que pone: “Espacio entre columnas” pondremos el selector en “1”.
Guarda y ya te debería aparecer el slider de vídeo con anchura completa
Nota: la opción “Width” situada en “Configuración módulo > Diseño > Tamaño” debe estar en “100%”
Nota: si ves algo raro en los márgenes superiores entre la fila y la sección, ve a la configuración de la sección y modifica los márgenes.
Slider de vídeos de anchura completa
5.- Cómo eliminar los vídeos sugeridos o relacionados de Youtube que aparecen al final de cada vídeo
Si utilizas Youtube para cargar los vídeos del Slider, habrás visto que al final de la reproducción de cada vídeo aparecen una serie de vídeos sugeridos.
En mi opinión esto queda bastante mal y lo ideal sería que no apareciera ningún vídeo sugerido al finalizar la reproducción de cada vídeo del slider de Divi.
Para poder realizar esto tendremos que añadir el siguiente código al head y esto lo realizaremos a través de las opciones de integración que nos proporciona Divi.
Para ello iremos a: “Divi > Opciones del tema” y luego haremos clic en la pestaña “Integration”.
En el campo “Agregar código al <head> de su blog” añadiremos el siguiente código:
<script type="text/javascript">
(function($) {
$(window).load(function() {
// Disable YouTube Related Videos
$('.fluid-width-video-wrapper').each(function() {
var src = $(this).find('iframe').attr('src');
$(this).find('iframe').attr('src', src + '&rel=0');
});
});
$(document).ready(function() {
// Open project promo in new tab.
$('.single-project .et_pb_promo').find('a').attr('target', '_blank');
});
})(jQuery);
</script>
Añadir código para que no se muestren los vídeos sugeridos en Youtube
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
¡¡¡¡Por fin!!!!. Llevo días buscando esta funcionalidad tan útil. Muchas gracias por el aporte, funciona de maravilla. No es la primera vez que me sacas de un apuro.
Saludos
Hola Adela,
Me alegro que te haya servido este post sobre la cración de una lista de reproducción de vídeos o slider de vídeos incrustados con Divi
Un saludo