Header-video-generatepress

Colocar un video de fondo al Header de GeneratePress

A menudo vemos webs con vídeos de fondo impactantes en las páginas de inicio. Si utilizas GeneratePress es muy sencillo colocar un vídeo de fondo a cualquier página. En este caso, te cuento cómo puedes ubicar un vídeo de fondo en la página de inicio.

La única pega que tiene esta manera de insertar un vídeo es que tienes que colgar el vídeo a tu WordPress. Por ello, recomiendo no abusar de vídeos de fondo. Como mucho yo cargaría un vídeo en tu web, y además, que no pesara mucho. Y como normalmente colocamos un filtro de color entre el vídeo y el texto, si éste no tiene mucha calidad, tampoco se percibirá.

Colgar un vídeo a WordPress

Si queremos colocar un vídeo de youtube tendremos que descargarlo previamente. En este caso he usado este convertidor, pero tú puedes usar lo que quieras, o quizás el vídeo es de creación propia y lo tienes en tu ordenador.

Sea como sea tienes que colgar tu video en la Biblioteca de medios tal y como harías con una foto. Una vez colgada deberás copiar el enlace del vídeo que ha creado WordPress.

Crear un nuevo Elemento

Después creamos un nuevo Elemento de Header y copia el siguiente código:

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
		<source src="https://tutorialesgeneratepress.local/wp-content/uploads/2020/02/Mi-video.mp4" type="video/mp4">
</video>

<div class="background-video-content">
    <h1>
			Endavant!
	</h1>
	<p>
		De cascú com era ajustat se mostraven totes les armes. Als servidors la sua partida En la fèrtil rica. E alt enginy havia servit per llong temps l'art de.
	</p>
</div>

Tendrás que sustituir la dirección web http: //tutorialesgeneratepress.local/wp-content/uploads/2020/02/Mi-video.mp4 por tu.

Y también podrás sustituir los textos h1 y p por lo que tú quieras. Incluso puedes decidir etiquetar el título con un h2 o lo que necesites. Ten en cuenta, que si utilizas nuevas etiquetas tendrás que modificar el CSS.

Modifica los parámetros de Elementos Header

Aquí deberás marcar la opción de Full screen, decidir el color de fondo que necesites, los colores de los textos, enlaces … Y luego ir a la pestaña de Site headers y marca las opciones de merge y personaliza los colores del menú, sobre todo con temas de transparencia.

Después decide donde quieres mostrar el vídeo. En este caso hemos marcado la opción de Front page. Esto significa que sólo se ver en la página de inicio.

Aplicar el CSS adecuado

Ahora sólo tendremos que aplicar el siguiente código CSS (en este caso yo lo he puesto al personlizador, pero siempre es mejor utilizar un plugin como simple CSS o en la plantilla de tu tema hijo).

/* Video de fons al header de GeneratePress*/

.background-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.18;
}

.page-hero {
	position: relative;
	overflow: hidden;
}

video[poster] {
	object-fit: cover;width: 100%;
	height: 100%;
}

.background-video-content{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	width: 50%;
	margin: -5% 0 0 -25%;
}

.background-video-content h1{
	font-size: 120px;
	font-weight: 900;
	color: yellow;
}

.background-video-content p{
	color: #ffffff;
	font-size: 20px;
	font-weight: 400;
	width: 70%;
	margin: 0 auto;
}

Después sólo tendremos que modificar los parámetros que deseamos. En el vídeo verás como lo podemos hacer, y comprobarás que es muy sencillo cambiar márgenes, tipografías y colores.

Vídeo tutorial de cómo poner un vídeo de fondo en el Header de GeneratePress

Deja un comentario

Identifícate