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

Create HTML5 Fullscreen Static Video Background Using CSS

August 30th, 2020 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 Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article Create Like & Unlike System in PHP, MySQL and jQuery
Previous article Simple PHP REST API with Slim, PHP & MySQL

Huzoor Bux

I am a PHP Developer

Related Posts

How to building responsive WordPress theme using Bootstrap Bootstrap
February 4th, 2021

How to building responsive WordPress theme using Bootstrap

Create pure CSS based toggle visibility button CSS
November 16th, 2020

Create pure CSS based toggle visibility button

How to create Full Screen Responsive Image Gallery using CSS and Masonry CSS
October 8th, 2020

How to create Full Screen Responsive Image Gallery using CSS and Masonry

Leave a Reply Cancel reply

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

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.