├── screenshot.jpg ├── README.md ├── index.html └── style.css /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/background-video/HEAD/screenshot.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Page With Video Background 2 | In this tutorial ([Open in Youtube](https://youtu.be/XFmWyCX7LbQ)), I'm going to show you how to use modern HTML and CSS to create a completely responsive page with background playing video! 3 | You can use this in your website design projects❗️ 4 | 5 | # Important 6 | On Html file line 15 you need to add your video path : 7 | ```html 8 | 9 | ``` 10 | 11 | 12 | 13 | # Screenshot 14 | Here we have project screenshot : 15 | 16 | ![screenshot](screenshot.jpg) 17 | 18 | ### Video 19 | Background video downloaded from Pexels Website. 20 | Link To File 21 | 22 | # AsmrProg 23 | 24 | We create a project each 4 days with voting on our Youtube channel. 25 | You can vote for upcoming projects on our channel **community** page :wink: -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Page With Background Video | AsmrProg 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |

Exploring Jungle

19 |
20 | 21 |
22 |

23 | Discover a mesmerizing jungle, where lush green foliage embraces the landscape, and vibrant wildlife 24 | thrives in 25 | harmony. The dense canopy casts a symphony of shadows, creating an immersive experience that transports 26 | you into 27 | nature's enchanting realm. Navigate through the intricate network of towering trees, each telling a tale 28 | of 29 | resilience and growth. 30 |

31 |

Video Credit: Be The Observer on pexels.com 33 |

34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | body{ 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Raleway', sans-serif; 7 | overflow: hidden; 8 | } 9 | 10 | video{ 11 | width: 100vw; 12 | height: 100vh; 13 | object-fit: cover; 14 | } 15 | 16 | header{ 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -100%); 21 | color: #fff; 22 | text-align: center; 23 | } 24 | 25 | header h1{ 26 | font-weight: 500; 27 | font-size: 1.75rem; 28 | text-transform: uppercase; 29 | line-height: 1; 30 | } 31 | 32 | header span{ 33 | font-weight: 800; 34 | font-size: 7rem; 35 | display: block; 36 | } 37 | 38 | .description{ 39 | position: absolute; 40 | bottom: 2%; 41 | width: 50%; 42 | left: 0; 43 | right: 0; 44 | margin: auto; 45 | background-color: #000; 46 | color: #fff; 47 | border-radius: 20px; 48 | opacity: 0.7; 49 | padding: 1.5rem; 50 | } 51 | 52 | .description p{ 53 | text-align: justify; 54 | max-width: 42rem; 55 | margin-inline: auto; 56 | line-height: 1.5; 57 | } 58 | 59 | .copyright{ 60 | font-size: 0.65rem; 61 | } 62 | 63 | .copyright a{ 64 | color: #fff; 65 | text-underline-offset: 1.8px; 66 | } 67 | 68 | @media screen and (max-width: 1200px) { 69 | .description{ 70 | position: absolute; 71 | width: 91vw; 72 | bottom: 0; 73 | border-radius: 20px 20px 0 0; 74 | margin: auto; 75 | padding: 0.6rem 1.5rem; 76 | } 77 | } --------------------------------------------------------------------------------