Up next in 10
How To Add Video Background In Website Using HTML And CSS Step By Step Tutorial
113 views
Feb 8, 2024
The video "How to Add Video Background in Website Using HTML and CSS Step By Step Tutorial" is a comprehensive guide that walks viewers through the process of integrating a video background into a website using HTML and CSS. Throughout the tutorial, viewers are provided with step-by-step instructions on how to select a suitable video file, embed it into the HTML document, and style it using CSS to achieve the desired look and feel. The video covers essential techniques such as setting the video dimensions, adjusting playback settings, and ensuring compatibility across different browsers and devices. By following along with the instructions and code demonstrations provided in the video, viewers can learn how to enhance the visual appeal and engagement of their websites by incorporating dynamic video backgrounds. Whether for landing pages, headers, or sections of a website, this tutorial offers practical insights into leveraging HTML and CSS to create immersive and visually striking web experiences with video backgrounds.
View Video Transcript
0:00
Hi guys, welcome back to another video of Easy Tutorials
0:03
Today in this video we are going to create a website with background video
0:07
You can see here I have created a website header section and in this one I have added a video in the background that is playing automatically and here we have this title and on this title you can see this hover effect
0:19
When I take cursor over this text the text color becomes transparent and you can see only a stroke in this text
0:26
Before starting this video, I would like to thanks Bluehost for sponsoring this one
0:29
video Bluehost is very good website to buy domain name and web hosting
0:34
If you will buy a web hosting from Bluehost, you will get the free SSL certificate, free SEO
0:40
tool and free CDN. When you will buy web hosting for one year you will get the free domain name also
0:47
In any of the web hosting plan you get the SSD storage which is very fast and you get the
0:53
unmetered bandwidth. It means there will be no issue with the traffic. You can drive any number of traffic on your website and your website will be able to be
0:59
be always up and running. Here you get the free SSL protection
1:04
I will put the Bluehost link in the video description so that you can come on this website
1:08
in one click and start building your website. If you don't know how to build your website with Bluehost, I have dedicated video on this
1:15
one where you can learn how to build and publish your website in just few minutes
1:19
You can find that video link also in the description. Now let's start this video
1:25
Here in this folder I have added one index.html file and style
1:29
Here I have one more folder called images and in this one you can see I have one logo and one video
1:38
You can find this logo and video download link in the video description
1:43
Next I will open this HTML and CSS file with my code editor which is Visual Studio code
1:50
So this is the HTML file where I have added the basic stimulus structures and this is the CSS file
1:56
And here I have added the link tag to connect HTML and CSS file
2:02
Next we will add code in the body tag that will be displayed on our web page
2:07
So in this body we will create a dip with the class name hero
2:12
Next we have to add the CSS. So just copy this class name, write it here
2:16
And here we have to add width and height. So the width will be 100%
2:22
Let's add the height 100 VH. that we will add the background let's add the background image linear gradient and
2:32
here we will add two color code so this is the first color code let me add a
2:42
comma here and paste again so this is the linear gradient color in the
2:48
background and after that we will add position relative let's add add some padding display will be flex align items center and justify content center
3:07
so that we will add text within this div that will be displayed in the center of the
3:12
web page after adding this let's come back to the folder and open this HTML file
3:18
with any web browser now you can see this plain color on the complete web page Let come back to the HTML file and here we will add a nav tag and within this nav let add one image write the file path images slash logo
3:37
It is logo.png and write a class name called logo. After that we will add UL tag and LI for the list
3:47
In this LI we will add A tag so that it will be a clickable link and here we will add the link
3:52
text so it is home let's duplicate it and change the link text after updating this
4:03
let's refresh the website again now you can see this logo and these links in the
4:11
center of the web page next we have to change its position and we will align it
4:14
side by side let's come back and copy the snap for this nap we will add wit
4:22
Bits will be 100% and position will be absolute. Top 0, left 0
4:40
Then we will add some padding. Display will be flex, align item center, justify content, space between
4:56
Next we have to change the size of this logo. Within this nap, we have added image with the class name logo
5:02
So here let's add the logo class name and set the width
5:07
So width will be 80 pixel. So that logo will be small
5:14
After this logo you can see we have added the list in ULLI and A tag
5:20
So let's come back and here we will add nav ULI. Lister style will be none
5:29
Then we will add display, it will be inline block, and after that we will add some space
5:37
from the left side. So here we will add margin from the left side. It is 40 pixel
5:44
can see these menu like this it is side by side now we have to change the color
5:49
and remove this underline let's come back and paste it again then write a for the
5:56
anchor tag here we will add text decoration none then we will change the color
6:01
and we will also change the font size after updating this again refresh the
6:10
website and now you can see these text in white color After adding this, let's come back and in this HTML file, after closing of the snap tag
6:24
here we will create another div with the class name content. And within this content, we will add a title in H1
6:36
And then we will add a link with A tag. You can see this text here and this link
6:47
Explore. Just copy this class name content, write it here. Here we will add text align center Again write this class name and here we will add CSS for the title which is in the h1 so we have to increase the font size it will be 160 pixel and
7:08
after that we will add the color color will be white and let's add the font weight will
7:13
be 600 next we will add the same class name ache content and a for the link
7:24
Here we will add the text decoration none then we will add display display will be inline
7:31
block and let's change the color color will be white and let me add the font size
7:40
of 24 pixel so that the button text color will be large then we will add some
7:48
border so here we will add border of 2 pixel solid and color will be white
8:01
Let's add some padding. It will be 14 pixel from top and bottom and 70 pixel from left
8:09
and right side. After that we have to add the border radius so that the corner will be round
8:15
Let's add the border radius of 50 pixel and some margin from the top
8:23
After updating this, again refresh the website and now you can see this text here and below
8:29
this text you can see this button. Explore. So we have added all the contents on this webpage
8:36
Next we have to add a video in the background of this webpage
8:40
So let's come back and come to the HTML file. Just above this nav tag here we will add some space and let's add a video with video tag
8:53
Like this video open and closing tag. Here we will add AutoPlay
9:02
Then we will add loop. Then muted and plays in line
9:16
So before this closing video tag here we will add source. an SRC and in this one we have to add the file path of the video so let's come back to
9:32
the folder and you can see the folder name is images and in this folder we have
9:37
the video called video dot MP4 here we will add images slash video dot MP4 like this
9:48
and after that we will add type Type will be video slash MP4, that's it
10:01
After updating this again come back to the webpage and now you can see this video is playing
10:05
over here but it is not at the right position so we have to set its position and it will
10:11
be displayed in the background of this webpage. So just come back and here in this video tag we will add a class name
10:19
Let's add the class name back video. Like this Just copy this class name write it here in the CSS file Here we will add the position
10:34
So the position will be absolute. Write 0 and bottom 0
10:48
Z index will be minus 1. Now you can see the correct position for this image but the size is not perfect
10:59
So we have to add the aspect ratio so that it will be responsive for all screen size
11:05
Let's come back and here we will add at the rate media
11:23
respect ratio 16 slash 9. Here we will add dot back video, width will be 100% and height auto
11:42
Just duplicate this one and here we will change it as max expect ratio which is maximum aspect ratio and
11:52
and the width will be auto and height will be 100%. That's it
12:02
After updating this, let's refresh the website again. Now you can see the video size is perfect
12:07
to this screen size. Next we have to add the hover effect on this title
12:17
For that, let's come back and here you can see we have added the
12:22
CSS for this title content dot h1 so head only we will add dot content h1 hover like this
12:37
and in this one we will add web kit text stroke
12:52
2 pixel and it will be white color
13:03
Then we will add color. So the color will be transparent. We have added WebKit text stroke 2 pixel and white color
13:16
Color is transparent and in this one here we will add transition
13:21
Transition will be 0.5 seconds. That's it. After updating this code, let's refresh the website again
13:29
And now you can see when I take cursor over this text, the text color becomes transparent
13:36
And you can see the stroke for these text. So we have completed this web page with background video
13:44
I hope this video will be helpful for you. If you have any question, you can ask me in the comment section
13:49
Please like and share this video. and also subscribe my channel easy tutorials to watch more videos like this one
13:55
Thank you so much for watching this video