Pro pozadí stránek můžeme použít i video. Dnes nejčastěji uložené na Youtube.com. Použití těchto videí je však značně problematické. proto je vhodnější si potřebné video stáhnout a používat vlastní adresu. Funkční stránka může vypadat např. takto:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } html, body { height: 100%; } html { font-family: Helvetica, Arial, sans-serif; font-size: 150%; line-height: 1.4; } body { margin: 0; } .viewport-header { position: relative; height: 50vh; text-align: center; display: flex; align-items: center; justify-content: center; } h1 { font-family: Helvetica; color: #ac9272; text-transform: uppercase; letter-spacing: 2vw; line-height: 1.2; font-size: 3vw; text-align: center; } main { width: 80vw; left: 10%; overflow: auto; background: rgba(black, 0.66); color: white; position: relative; padding: 1rem; padding: 20px; border: 1px solid #ac9272; text-align:center; color: #ac9272; font-weight: bold; } </style> </head> <body> <video src="https://oaznojmo.eu/demo/video-na-pozadi/videopozadi3.mp4" autoplay loop playsinline muted></video> <header class="viewport-header"> <h1>Ukázka videa na pozadí</h1> </header> <main>oaznojmo.eu</main> </body> </html>
Výsledek takto vloženého videa najdete v této ukázce.