all right so here i have created this folder called video text and i just opened it with vs code and i also have a folder over here called videos and in.
That we have these three videos over here and we're going to use them in our design so let's start by creating the necessary files let's create an html file so let's click on new file.
And we'll just name it index.html we'll also create a css file so i'll just name it style.css let's start with the index.html file and in vs code you have this shortcut where.
You can just press exclamation and press tab and you'll have this basic html5 code and let's link our css file over here so i'll just type link and in the extra values type style.css.
Right now for this i just create a container division and i'll just give it a class of video text container now the first thing we will do is we'll create a video tag so let's type video.
Videos forward slash and let's use the second video and the next attribute we need to have is the type so let's type type and the type is mp4 so we need to type.
Video forward slash mp4 right now let's create a division for the text so i'll just create a division of the class of text container.
And in that we will have an h2 and i'll just type welcome right now let's open this in our browser so i have this extension called live server installed in vs code so once you.
Do that you can just right click over here in the html and click on open with live server right now here we can see we have the thumbnail of the video displayed over.
Here and here we have the heading now this video is not playing right now so let's go back to our html and here in the video i'll just add some attributes first of all let's type auto play so.
That it will start playing when the page Wesdigital
Loads and we'll also add an attribute called loop so that the video plays for infinite amount of times and will also add muted so that even if the video has.Any audio it will be muted right now let's save this and let's go back to our browser and here we can see that the video is being played right let's go back and now let's start.
Styling this so let's go to our style.css file and uh the first thing we will do is we will import our phone so let's go to phones.google.com and let's search for the phone that we want so.
I'll just type babis so this is the font that we need so i'll just click on this font and let's click on select this style and let's click on this button called viewer.
Selected families and now you can copy and paste this link to your html file so let's copy this and let's go back to our html file and let's paste it over here inside the.
Head section right now let's go back to our style.css file and the first thing we will do is we will remove all the margin from the body.
So here we can see we have this margin on the top and on the left so let's type body and margin 0 and now we can see we don't have any.
Margin and the next thing we will do is we will set the height and the width to 100 percent of the screen size so here we can see we have this division with a.
Class of video text container so let's target that here i'll just type video text container and let's set the height to 100 viewport height and the width to 100 percent.
Now let's set the height of the video as
Well so let's type video text container video and we'll set the height to 100 of the parent which is the video text container.And 100 width of the parent and we'll also set the object fit to cover so that it has the correct aspect ratio right now let's go back to our website and we can see we have the correct width and.
Height for the video now the next thing we will do is we will set the position of this text container relative to this video text container so for that here in the video text.
Container we have to type position relative and now let's target the text container so let's type video text container text container and here we'll set the position to.
Absolute and we'll set the left position to 0 and the top position to 0 and we'll also set the height to 100 percent.
And the width to 100 percent right now we can see we have this heading over here now let's bring the heading to the.
Center so for that let's set the display to flex and let's set the align items to the center and justify content to center now the text is in the center now let's set the phone family to.
Vapors and sans-serif and let's also set the font size to 200 pixels let's set the text transform to uppercase.
Right now let's go back and here we can see we have the text displayed over here now let's set the background color of the text container to black.
And let's see the color of the text to white and now the last thing we need to do is type mix blend mode and we have to set it to multiply right now let's go back and here we can.
See we have the text displayed over here and in that we have the video displayed so everything is working all right so that's how you can add video inside a text using html and css now if you want.
To add a white background over here then you have to change some things over here in the css so let's set the background color to white and let's set the color of the text to.
Black and the next thing you have to do is set the mix blend mode to screen now let's go back and here we can see we have the white background color and we.
Have the video inside the text let's also change this video so let's go to the index.html file and i'll just change this video to three dot mp4.
And now we can see we have the updated video displayed over here so that's how you can add video inside text using html and css alright so that's it for this video i will leave.
The link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this.
Channel to get the latest video updates thanks a lot for watching have a nice day wow.