Secciones de la documentación
Buscar⌘KFondo en tu sitio: código y enlaces
La pestaña Embedding tiene un bloque HTML listo para tu sitio y una página de reproductor para constructores web.
Código para tu sitio
Un bloque de video a todo el ancho con póster y una capa oscura bajo el texto. Haz clic en Copy, pégalo en tu página y sustituye el comentario por tu contenido:
html
<style>
.bg-video { position: relative; overflow: hidden; min-height: 60vh; }
.bg-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-video::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.bg-video__content { position: relative; z-index: 1; color: #fff; }
</style>
<div class="bg-video">
<video autoplay muted loop playsinline poster="https://stream.dodocast.com/bgv/code.jpg">
<source src="https://stream.dodocast.com/bgv/code-mobile.mp4" type="video/mp4" media="(max-width: 767px)">
<source src="https://stream.dodocast.com/bgv/code.mp4" type="video/mp4">
</video>
<div class="bg-video__content">
<!-- Tu texto sobre el video -->
</div>
</div>- Si el navegador no inicia el video por sí solo (ahorro de energía, bloqueadores), el visitante ve el póster.
- Las pantallas estrechas reciben el archivo para teléfono; el navegador lo elige automáticamente.
- Los enlaces son permanentes: cuando reemplazas el clip, tu sitio recibe el nuevo sin cambiar el código.
See it on a demo page muestra tu fondo en cuatro vistas: pantalla completa, en una ventana junto a texto, en la pantalla de un dispositivo y en un teléfono.
Página del reproductor (iframe)
Para constructores web que solo aceptan un iframe. Define el tamaño del bloque en el constructor y el reproductor lo llena por completo:
html
<iframe src="https://watch.dodocast.com/bgv/code" title="Background video"
aria-hidden="true" tabindex="-1"
style="width: 100%; height: 100%; border: 0; pointer-events: none;"></iframe>A través del iframe no puedes oscurecer ni recortar el clip a tu manera. Para eso, usa el código de arriba.
Enlaces permanentes
| Archivo | URL |
|---|---|
| principal | https://stream.dodocast.com/bgv/<code>.mp4 |
| teléfono | https://stream.dodocast.com/bgv/<code>-mobile.mp4 |
| póster | https://stream.dodocast.com/bgv/<code>.jpg |
Actualizado: