How to Set a Full-Page Video Background in a Digioh Campaign

What You'll Learn

This guide walks you through embedding a full-screen video background in a Digioh widget (like a quiz or lightbox). You’ll learn:

• How to structure the HTML and CSS in an HTML block.

• Where to host your video file (and what not to use).

• How to position the video properly so it plays behind your content.

Disclaimer: This guide includes HTML and CSS customization. Misuse of HTML/CSS may affect your campaign’s display or performance.

Example in Action

Preview a working version here:
Example Campaign with Full Video Background

Overview

While animated GIFs are the easiest route for a dynamic background (simply upload the GIF as a background image and set it to “cover”), you can also embed a video as a full-page background using HTML and CSS inside a Digioh HTML block.

This guide walks you through embedding a video background in a quiz or any other on-site widget using Digioh. We'll ensure the video stays behind your content using z-index and fixed positioning.

Video File Requirements

• Self-hosted: You must use a direct link to a .mp4 file hosted on your site or on Digioh's file manager.

• Max size: 4MB is the limit if hosting on Digioh.

• Do NOT use: YouTube, Vimeo, or Google Drive links — these will not work inside a <video> tag.

Steps

1. Add an HTML Block to Your Page

Paste the following code into the HTML block of your quiz/page:

Copy this HTML/CSS into an HTML block and replace the video src url with the link to your video.

<style> #video-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; } #video-container video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; pointer-events: none; } </style> <div id='video-container'> <video autoplay muted loop playsinline> <source src='https://s3.lightboxcdn.com/vendors/dfad470b-6aaf-47ca-92f4-0192568fe5ac/uploads/0e0333ff-2e43-4af7-909c-35d2ce4d68d2/6913935_Motion_Graphics_Motion_Graphic_1920x1080.mp4' type='video/mp4'> Your browser does not support the video tag. </video> </div>

Replace the src URL with your own hosted video file link.

2. Apply Wrapper CSS

To ensure the HTML block doesn’t overlap your content, set the Wrapper CSS of the HTML block to:

Key	Value
z-index	0

This places the HTML block just above the background video (z-index -1), but below all other content layers.