¿Cómo usar un video de Youtube como fondo de página?
- Diseño
En muchos diseños actuales podemos ver que en lugar de utilizar imágenes de fondo de una página o parte de ella se usan videos.
Para lograr este efecto que por ejemplo lo pueden ver funcionando en este sitio lo que debemos hacer es usar el GXportlet que nos permite embeber HTML dentro de las páginas de GXportal y usar el siguiente snippet de código HTML
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" src="https://youtube.com/embed/ID?autoplay=1&controls=0& showinfo=0&autohide=1" width="100%">
</iframe>
</div>
Donde debemos sustituir ID por el identificador que podemos sacar de la URL del video de Youtube, por ejemplo de este video https://www.youtube.com/watch?v=sOnqjkJTMaA el ID sería lo que esta luego del v= o sea sOnqjkJTMaA
Si se quiere usar como fondo de toda la página se debe ubicar el GXportlet de HTML en la primera región que actúa como cabezal de la misma y dejar las propiedades width y height del DIV con el valor 100%
Si se quiere usar sólo como fondo de una región de la página en particular entonces se debe colocar el GXportlet de HTML dentro de esa región y hacer que las propiedades width y heigth del DIV coincidan sus valores con el ancho y altura de la región respectivamente.
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" src="https://youtube.com/embed/ID?autoplay=1&controls=0& showinfo=0&autohide=1" width="100%">
</iframe>
</div>
Donde debemos sustituir ID por el identificador que podemos sacar de la URL del video de Youtube, por ejemplo de este video https://www.youtube.com/watch?v=sOnqjkJTMaA el ID sería lo que esta luego del v= o sea sOnqjkJTMaA
Si se quiere usar como fondo de toda la página se debe ubicar el GXportlet de HTML en la primera región que actúa como cabezal de la misma y dejar las propiedades width y height del DIV con el valor 100%
Si se quiere usar sólo como fondo de una región de la página en particular entonces se debe colocar el GXportlet de HTML dentro de esa región y hacer que las propiedades width y heigth del DIV coincidan sus valores con el ancho y altura de la región respectivamente.