Fullscreen HTML5 Page Background Video

Developer
Francesca Tabor
Size
2,469 Kb
Views
46,552
  1. Fullscreen HTML5 Page Background Video Previews
  2. Fullscreen HTML5 Page Background Video HTML Codes
  3. Fullscreen HTML5 Page Background Video CSS Codes

How do I make an fullscreen html5 page background video?

What is a fullscreen html5 page background video? How do you make a fullscreen html5 page background video? This script and codes were developed by Francesca Tabor on 10 July 2022, Sunday.

Fullscreen HTML5 Page Background Video Previews
IQ Test

Fullscreen HTML5 Page Background Video - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fullscreen HTML5 Page Background Video</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <video autoplay poster="https://d13yacurqjgara.cloudfront.net/users/605899/screenshots/2319081/nikita_melnokov_on_dribbble.gif" id="bgvid" loop> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="https://d13yacurqjgara.cloudfront.net/users/605899/screenshots/2319081/nikita_melnokov_on_dribbble.gif" type="video/webm">
<source src="https://d13yacurqjgara.cloudfront.net/users/605899/screenshots/2319081/nikita_melnokov_on_dribbble.gif" type="video/mp4">
</video>
<div id="polina">
<h1>Digital Loft</h1>
<p>An innovation agency by technology experts
<p>We solve business, social and creative challenges by creating empowering technology. We believe in the future and we build it every day from our offices.</p> <p><a href="http://weareloft.com/">Enter</a>
</div>
</body>
</html>

Fullscreen HTML5 Page Background Video - Script Codes CSS Codes

body { margin: 0; background: #000;
}
video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('https://d13yacurqjgara.cloudfront.net/users/605899/screenshots/2319081/nikita_melnokov_on_dribbble.gif') no-repeat; background-size: cover; transition: 1s opacity;
}
.stopfade { opacity: .5;
}
#polina { font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif; font-weight:100; background: rgba(0,0,0,0.3); color: white; padding: 2rem; width: 33%; margin:2rem; float: right; font-size: 1.2rem;
}
h1 { font-size: 3rem; text-transform: uppercase; margin-top: 0; letter-spacing: .3rem;
}
#polina button { display: block; width: 80%; padding: .4rem; border: none; margin: 1rem auto; font-size: 1.3rem; background: rgba(255,255,255,0.23); color: #fff; border-radius: 3px; cursor: pointer; transition: .3s background;
}
#polina button:hover { background: rgba(0,0,0,0.5);
}
a { display: inline-block; color: #fff; text-decoration: none; background:rgba(0,0,0,0.5); padding: .5rem; transition: .6s background;
}
a:hover{ background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { div{width:70%;}
}
@media screen and (max-device-width: 800px) { html { background: url(https://d13yacurqjgara.cloudfront.net/users/605899/screenshots/2319081/nikita_melnokov_on_dribbble.gif) #000 no-repeat center center fixed; } #bgvid { display: none; }
}
Fullscreen HTML5 Page Background Video - Script Codes
Fullscreen HTML5 Page Background Video - Script Codes
Home Page Home
Developer Francesca Tabor
Username ftabor
Uploaded July 10, 2022
Rating 3
Size 2,469 Kb
Views 46,552
Do you need developer help for Fullscreen HTML5 Page Background Video?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Francesca Tabor (ftabor) Script Codes
Name
Preloader
Page Template - Wahanda
Loft - Home v2
Loft - Case Study
Loft - About Page
Autotyping
Loft - Home
Bubble animation
Timeline
Sticky Responsive Navigation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!