| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FullScreen Video Background</title> | |
| <style> | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; | |
| } | |
| .banner{ | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .banner video{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| object-fit: cover; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .banner .content{ | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| text-align: center; | |
| color: white; | |
| font-size: 30px; | |
| opacity: 0.7; | |
| } | |
| .banner .content h1{ | |
| background-color: rgb(9, 9, 117); | |
| border-radius: 10px; | |
| } | |
| .banner .content p{ | |
| background-color: rgb(5, 109, 52); | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="banner"> | |
| <video src="pubg video.mp4" autoplay muted loop></video> | |
| <div class="content"> | |
| <h1>Sync Programming Fullscreen Video Tutorial</h1> | |
| <p>This is about the Fullscreen video that you can embed in your website <br> | |
| In this video tutorial you will learn how to make a fullscreen video background</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
No comments:
Post a Comment