Video de fondo
A continuación vamos a ver como insertar un video de YouTube como cabecera de una página de tu web Gesio. Para ello será necesario tener conocimiento de HTML y CSS para personalizar la inserción del video.
Captura y configuración del video de Youtube
Lo primero que tenemos que hacer es buscar el código necesario para insertar el vídeo de YouTube que queremos mostrar de fondo. Iremos al vídeo elegido y haremos clic en el botón de compartir que encontraremos bajo el título.
En la siguiente ventana emergente haremos clic en la opción “Insertar”
Esto abrirá una nueva ventana que nos mostrará el código fuente que deberemos copiar para pegarla en nuestra web. Primero desmarcaremos la opción “Mostrar los controles del reproductor.”
Y a continuación si que pulsaremos el botón “Copiar” para empezar la personalización del código de inserción. Vamos a usar el siguiente código como ejemplo:
iframe width="560" height="315" src="https://www.youtube.com/embed/sEH3pOhj0xs?si=CyBfUCeK4ki0jFPv&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
Quitaremos todas las propiedades innecesarias, que son todas excepto controls=0 y finalmente añadiremos dos propiedades adicionales: autoplay=1, mute=1 y playsinline=1 Para que el vídeo comience a reproducirse al cargar y mutee el sonido, quedando el código así:
iframe src=“https://www.youtube.com/embed/sEH3pOhj0xs?si=CyBfUCeK4ki0jFPv&controls=0&autoplay=1&mute=1&playsinline=1”
Por último configuraremos una reproducción indefinida de nuestro vídeo para la que deberemos capturar la identificación de nuestro vídeo que encontraremos justo después de /embed/` (o después ?v= al acceder al vídeo a través de YouTube) que hemos destacado en verde anteriormente y añadiremos el siguiente código a nuestra llamada del vídeo:
&playlist=sEH3pOhj0xs&loop=1
Quedando finalmente así:
iframe src=“https://www.youtube.com/embed/sEH3pOhj0xs?si=CyBfUCeK4ki0jFPv&controls=0&autoplay=1&mute=1&playsinline=1 &playlist=sEH3pOhj0xs&loop=1”
Contenedor del video
Ahora crearemos la sección que contendrá el video. Esta será de tipo 
En la configuración deberemos tener en cuenta estos dos puntos:
1 Indicaremos un "nombre de clase" que utilizaremos para recolocar la sección en la parte superior de la página.
2 El iframe que hemos creado lo añadiremos dentro de un DIV al que vincularemos un ID único que lo identificará para las futuras configuraciones vía CSS.
<iframe src=“https://www.youtube.com/embed/sEH3pOhj0xs?si=CyBfUCeK4ki0jFPv&controls=0&autoplay=1&mute=1&playsinline=1 &playlist=sEH3pOhj0xs&loop=1”></iframe>
</div>
Reubicar la sección
Para que el video ocupe todo el ancho del navegador y se sitúe justo debajo de la cabecera.
Desde la pestaña "General" de nuestro site añadiremos el código jQuery que recolocará el bloque del video.
1 Pestaña "general" dentro de la edición de la web Gesio.
2 Añadiremos el siguiente código en la caja de texto "Tras la etiqueta 'Body'". section.bloque-videoTop deberá tener el nombre asignado a la sección en el paso anterior.
<script type="text/javascript">
$(document).ready(function(){
$( "#base" ).before( $( "section.bloque-videoTop" ) )
});
</script>
Dando estilos al video
Por último creareemos los estilos CSS necesarios para la correcta visualización del video:
#video-cabecera {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px; /* Esta línea ofrece compatibilidad para IE6 y puede eliminarse */
position: relative;
}
#video-cabecera iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
RECUERDA. Los ID y clases deben ser LOS MISMOS que has indicado en tu código si no has utilizado los que proponemos.
Añade contenido sobre el video
El contenedor del video tiene un posicionamiento definido en "relative" por lo que podremos crear cualquier contenido posicionándole como "absolute" para que se ubique donde queramos dentro del contenedor.
en el ejemplo que vamos a desarrollar colocaremos una capa centrada con texto en su interior.
En primer lugar añadiremos el siguiente código a la sección que habíamos creado:
<h2>Titular sobre el video</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu vel turpis.</p>
</div>
A continuación deberemos definir los estilos CSS que definirán el aspecto del contenido incluido. Para ello volvemos a ir a la pestaña Config. Gráfica > CSS adicional y en la hoja de estilos que consideremos apropiada añadiremos el siguiente código:
#texto-video-cabecera {
position: absolute;
color: #FFFFFF;
background: rgba(0, 0, 0, .5);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 50px;
z-index: 9;
}
div.megaeditor #texto-video-cabecera h2 {
font-size: 50px;
font-weight: 800;
color: rgba(255, 255, 255, .7);
line-height: 1;
margin-bottom: 10px;
}
div.megaeditor #texto-video-cabecera p {
font-size: 24px;
font-weight: 800;
color: rgba(255, 255, 255, .6);
line-height: 1.4;
}
Deberás revisar los estilos responsive para diferentes anchos de pantalla.