• Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Create HTML5 Fullscreen Static Video Background Using CSS
Home
Designing

Create HTML5 Fullscreen Static Video Background Using CSS

June 15th, 2025 Huzoor Bux CSS, Designing 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

This tutorial will show you how to add a static video background using CSS. It’s a straightforward and easy script and looks fantastic on landing pages. In this tutorial, we are using HTML5 <video> tag to embed video and CSS to put that video on background.

DEMO
DOWNLOAD CODE

HTML5 Video used to add video on your page:

<video id="my-video" class="video" autoplay muted loop>

   <source src="videos/polina.mp4" type="video/mp4">

</video>

Above script add video using HTML5 <video> tag. In video properties, we set it to mute, autoplay, and loop it will play video automatically without sound and repeat it all the time in the source we put our video file.

CSS used to make video background working:

div, h1, p, a, video, h2{

    z-index: 2;

    position: relative;

}

.content {

  position: relative;

  top: 30%;

  z-index: 2;

  margin: 0 auto;

  max-width: 720px;

  text-align: center;

}



.content__heading {

  margin-bottom: 24px;

  color: rgb(39,39,39);

  font-size: 44px;

}



.content__teaser {

  margin-bottom: 24px;

  color: rgb(89,89,89);

  font-size: 22px;

}



.content__cta {

  display: inline-block;

  margin: 0;

  padding: 12px 48px;

  color: rgb(255,60,100);

  font-size: 22px;

  text-decoration: none;

  border: solid 4px rgb(255,60,100);

}



.video {

  position: fixed;

  top: 50%; left: 50%;

  z-index: 1;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  transform: translate(-50%, -50%);

}

Above CSS, add video on the full screen of your landing page.

That’s it.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article How to show Image before upload JavaScript & HTML5 FileReader()
Previous article Sanitizing input with PHP and JavaScript

Huzoor Bux

I am a PHP Developer

Related Posts

Skeleton Screen Loading Animation using HTML and CSS CSS
June 17th, 2025

Skeleton Screen Loading Animation using HTML and CSS

Create fly to cart / basket effect for eCommerce using jQuery and CSS CSS
June 17th, 2025

Create fly to cart / basket effect for eCommerce using jQuery and CSS

PHP Contact Form with Google reCAPTCHA V3 Example API
June 17th, 2025

PHP Contact Form with Google reCAPTCHA V3 Example

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe
Get new posts by email:
Powered by follow.it
Advertisement
Like us
Recent Posts
  • 9 Best Programming languages you should learn in 2021
  • What is Progressive Web Applications and Why Create a PWA?
  • 7 HTML attributes that you must learn today!
  • Why Use MongoDB and When to Use It?
  • Introduction to Git for version control
Categories
  • API
  • Bootstrap
  • Bot
  • CSS
  • CSS 3
  • Database
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • Laravel
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • Web 3.0
  • WordPress
Weekly Tags
  • PHP
  • How to
  • javascript
  • laravel
  • MYSQL
  • PHP framework
  • css
  • jQuery
  • HTML to PDF
  • Web Development
  • About
  • Privacy Policy
  • Back to top
© PHPLift.net. All rights reserved.