Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a full screen video background with CSS?
To create a full screen video background with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; } .backgroundVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } .playPauseBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: rgb(72, 22, 167); color: #fff; cursor: pointer; opacity: 0.8; } .playPauseBtn:hover { opacity: 1; } </style> </head> <body> <video autoplay muted loop class="backgroundVideo"> <source src="https://cdn.videvo.net/videvo_files/video/free/2019- 05/small_watermarked/190416_10_Drone1_04_preview.webm" type="video/mp4"/> </video> <div class="content"> <h1>Heading</h1> <h2>Some Sample text</h2> <button class="playPauseBtn">Pause</button> </div> <script> document .querySelector(".playPauseBtn") .addEventListener("click", toggleVideo); var video = document.querySelector(".backgroundVideo"); var btn = document.querySelector(".playPauseBtn"); function toggleVideo() { if (video.paused) { video.play(); btn.innerHTML = "Pause"; } else { video.pause(); btn.innerHTML = "Play"; } } </script> </body> </html> Output
The above code will produce the following output −
Updated on: 2020-05-07T10:48:31+05:30
586 Views
Advertisements