hi guys welcome back to another video of
easy tutorials today in this video we
are going to create a website with
background video 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 when
i take cursor over this text the text
color becomes transparent and you can
see only a stroke in this text before
starting this video i would like to
thanks bluehost for sponsoring this
video bluehost is very good website to
buy domain name and web hosting if you
buy a web hosting from bluehost you will
get the free ssl certificate free seo
tool and free cdn when you will buy web
hosting for one year you will get the
free domain name also
in any of the web hosting plan you get
the ssd storage which is very fast and
you get the 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
always up and running here you get the
free ssl protection i will put the
bluehost link in the video description
so that you can come on this website 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
one where you can learn how to build and
publish your website in just few minutes
you can find that video link also in the
description
now let's start this video
here in this folder i have added one
index.html file and style.css file
here i have one more folder called
images and in this one you can see i
have one
logo and one video
you can find this logo and video
download link in the video description
next i will open this html and css file
with my code editor which is visual
studio code
so this is the html file where i have
added the basic html structures and this
is the css file
and
here i have added the link tag to
connect html and css file next we will
add code in the body tag that will be
displayed on our web page so in this
body we will create a div with the class
name hero
next we have to add the css so just copy
this class name write it here
and here we have to add width and height
so the bits will be 100 percent
let's add the height 100 vh
after that we will add the background
let's add the background image
linear gradient and here we will add two
color code
so this is the first color code let me
add a comma here and paste again
so this is the linear gradient color
in the background and after that we will
add position relative
let's add some padding
display will be flex
align items center and justify content
center so that we will add text within
this tip that will be displayed in the
center of the webpage
after adding this let's come back to the
folder and open this html file with any
web browser
now you can see this plain color on the
complete web page
let's come back to the html file and
here we will add a
nav tag
and within this nav let's add one image
write the file path images slash logo it
is logo.png
and write a class name called logo
after that we will add ul tag and li for
the list
in this li we will add a tag so that it
will be a clickable link
and here we will add the link text so it
is home
let's duplicate it and change the link
text
after updating this let's refresh the
website again
now you can see this logo and these
links in the center of the web page next
we have to change its position and we
will align it side by side let's come
back
and copy this nav
for the snap we will add
width
which will be 100 and position will be
absolute
top 0
left 0
then we will add some padding
display will wave flex
align item center
justify content space between
next we have to change the size of this
logo then this nav we have added image
with the class name logo so here let's
add the logo class name and set the
width so width will be 80 pixel
so that logo will be small after this
logo you can see we have added the list
in uli and a tag
so let's come back and here we will add
nav ulli
list style will be none
then
we will add display it will be inline
block
and after that we will add some
space from the left side so here we will
add margin from the left side it is
40 pixel
now you can see
these menu like this it is side by side
now we have to change the color and
remove this underline let's come back
and
paste it again then write a for the
anchor tag
here we will add text decoration none
then we will change the color
and we will also change the
font size
after updating this again refresh the
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 this nav tag here we
will create another div with the class
name content
and within this content we will add a
title in h1
and then we will add a
link with a tag
you can see this text here and this link
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 after that
we will add the color color will be
white and
let's add the font weight will be 600.
next we will add
the same class name dot content
and a for the link
here we will add the text location none
then we will add display display will be
inline block
and
let's change the color color will be
white
and
let me add the font size of 24 pixel so
that the
button text color will be
large then we will add some
border so here we will add border of
two pixel
solid and
color will be white
let's add some padding it will be
14 pixel from top and bottom and 70
pixel from left and right side after
that we have to add the border radius so
that the corner will be round
let's add the border radius of 50 pixel
and
some margin from the top
after updating this again refresh the
website and now you can see this text
here and below this text you can see
this button
explore
so we have added all the contents on
this webpage next we have to add a video
in the background of this webpage
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
video
like this video open and closing tag
here we will add autoplay
then we will add loop
then muted and
place inline
so
before this closing video tag here we
will add source
then
src
and in this one we have to add the file
path of the video so let's come back to
the folder and you can see
the folder name is images and in this
folder we have the video called video
dot mp4
here we will add
images
slash
video dot mp4 like this
and
after that we will add
type
type will be
video slash
mp4
that's it
after updating this again come back to
the web page and now you can see this
video is playing over here
but it is not at the right position so
we have to set its position and it will
be displayed in the background of this
web page so just come back and here in
this video tag we will add a class name
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
so the position will be absolute
right 0 and
bottom
zero
z index
will be
minus one
now you can see the correct
position for this image but the size is
not perfect so we have to add the aspect
ratio so that it will be responsive for
all screen size let's come back and here
we will add at the date media
min aspect ratio
16 slash 9.
here we will add dot
back video
width will be
100
and
height auto
just duplicate this one
and here we will change it as max aspect
ratio
which is maximum
aspect ratio
and
the width will be
auto
and height will be 100
that's it
after updating this let's refresh the
website again now you can see the video
size is perfect to this screen size
next we have to add the hover effect on
this title for that let's come back
and
you can see we have added the
css for this title content dot h1 so
here only we will add
dot content
h1
hover
like this
and in this one we will add webkit
text
stroke
to pixel and
it will be white color
then we will add
color so the color will be transparent
we have added webkit text stroke to
pixel and white color color is
transparent and in this one here we will
add
transition
transition will be 0.5 seconds that's it
after updating this code let's refresh
the website again and now you can see
when i take cursor over this text
the text color becomes transparent
and you can see the stroke for these
text
so we have completed this web page with
background video i hope this video will
be helpful for you if you have any
question you can ask me in the comment
section please like and share this video
and also subscribe my channel easy
tutorials to watch more videos like this
one thank you so much for watching this
video