/layout/section/section-video

El componente BkSectionVideo sirve para representar una sección genérica en añadir contenido destacado, usando vídeos de background.

Hemos dejado expuesto el contenido del componente, children, para tener la libertad de añadir múltiples layouts y elementos según diseño.

Self hosted video

Si vamos a insertar más de 1 vídeo, dependiendo de la media query (por ejemplo: Desktop y Mobile), tendremos que añadir una prop key con valores diferentes para cada render. De lo contrario sólo se renderizará 1 vídeo:

<BkSectionVideo
	...
	localVideoMp4={ !matches ? "desktop-video.mp4" : "mobile-video.mp4" }
	key={ !matches ? "desktop-video" : "mobile-video" }
>
	{ children }
</BkSectionVideo>

¿Qué es Bkool?

El Simulador de Ciclismo Indoor más realista

<BkSectionVideo
	paddingX="large"
	paddingY="extraLarge"
	backgroundOverlay
	borderRadius
	backgroundImage="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.jpg"
	localVideoMp4="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.mp4"
	localVideoWebm="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.webm"
	localVideoOgv="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.ogv"
>
	{ children }
</BkSectionVideo>

¿Qué es Bkool?

El Simulador de Ciclismo Indoor más realista

<BkSectionVideo
	paddingX="large"
	paddingY="extraLarge"
	backgroundOverlay
	borderRadius
	backgroundImage="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.jpg"
	localVideoMp4="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.mp4"
	localVideoWebm="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.webm"
	localVideoOgv="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.ogv"
	wave="black"
>
	{ children }
</BkSectionVideo>

Embedded Youtube video

Si vamos a insertar un vídeo desde Youtube, tendremos que tener en cuenta que en la url del vídeo, deberemos añadir, al final, lo siguiente: ?&autoplay=1&mute=1&loop=1. Y además, añadir el parámetro playlist igual al ID del vídeo, en este caso: &playlist=QpwYcF0dbs4

¿Qué es Bkool?

El Simulador de Ciclismo Indoor más realista

<BkSectionVideo
	paddingX="large"
	paddingY="extraLarge"
	backgroundOverlay
	borderRadius
	backgroundImage="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.jpg"
	youtubeVideo="https://www.youtube.com/embed/QpwYcF0dbs4?&autoplay=1&mute=1&loop=1&playlist=QpwYcF0dbs4"
>
	{ children }
</BkSectionVideo>

Nombre	Type	Descripción
backgroundImage	string	La imagen del background del componente.
backgroundOverlay	bool	Añade un overlay al background del componente. Este overlay cambia dependiendo si es el estilo del Giro o de Bkool.
borderRadius	bool	Señala si tendrá radio el borde del componente.
children	node	Contenido del componente.
className	string	Sirve para añadir una clase a un componente.
localVideoMp4	string	Enlace del vídeo con extensión .mp4.
localVideoOgv	string	Enlace del vídeo con extensión .ogv.
localVideoWebm	string	Enlace del vídeo con extensión .webm.
paddingX	"none" \| "extrasmall" \| "small" \| "medium" \| "large" \| "extralarge" \|	Añade un padding horizontal al componente.
paddingY	"none" \| "extrasmall" \| "small" \| "medium" \| "large" \| "extralarge" \|	Añade un padding vertical al componente.
youtubeVideo	string	Enlace de vídeo en Youtube.
wave	"white" \| "black"	Añade un elemento curvo en el bottom del componente.