Up next in 10
Responsive Video Background Tutorial
331 views
Feb 7, 2024
The "Responsive Video Background Tutorial" is an instructional video that demonstrates how to implement a responsive video background on a website. Viewers are guided through the process of embedding a video element into a webpage, ensuring it scales appropriately across various screen sizes and devices. The tutorial covers important aspects such as HTML structure, CSS styling, and JavaScript techniques to achieve responsiveness. By following along with clear explanations and practical examples, viewers can learn how to create visually engaging and adaptable video backgrounds for their websites, enhancing the user experience across different devices. Whether you're a beginner or an experienced web developer, this tutorial offers valuable insights into creating dynamic and responsive web content.
View Video Transcript
0:00
Hello everybody, welcome to this week's CSS challenge video
0:03
This challenge was submitted to me in the comments of the last video by Lucky Strike GFXer
0:08
so if you want your challenge to be completed by me, make sure to comment it down below in this video
0:14
In this video, the challenge was to create a responsive video background
0:18
On the right here, I have an example of a full page version of those responsive video background
0:22
but this can be applied to any size element no matter how small or large they are
0:27
Let's get started by creating the HTML that we're going to need for this page
0:31
The first thing we want to do is create a wrapper for our video and the content inside of our video
0:39
To do this, we will create a div. We'll give the class of full screen video container
0:48
And inside it here, we'll put both our video object as well as the content that's displayed over top of our video object
0:54
Let's first create a video element and we'll apply a few different attributes to it
0:59
The first will be Autoplay, which will make our video play as soon as our browser loads
1:03
We want to apply loop so that our video will play from the beginning as soon as it gets to the end
1:09
And lastly, the property muted so that our video won't make any sounds that will know
1:13
our user. Next we need to who. Supply a source for what our video is coming from
1:19
In our case, we only are going to have one source, and that source has an attribute
1:23
which is source again, which is going to say where that video is coming from, just like an
1:28
H-RF for example, and we have a file called background video.m.4, and then we need to tell
1:33
our video source attribute what type this is, and in our case, it's going to be video slash
1:40
mp4, since this is an MP4 file. There we go. That's our source taken care of. And now we want
1:48
to create an actual div for the content that's going to go over top of our video. So down here was
1:53
create another div. We're going to give it a class of full screen video content, since
1:58
this is the content inside of our video, and in here we're just going to put the text
2:02
you see on the screen of Paradise Awaits. Now let's open that up with Live Server and
2:09
see what we have so far As you can see we have our video as well as our text over here which is slightly off of the screen but that no problem We be fixing that later Let jump into our styles and start applying the styles we need in order to take this page and make it look exactly like this page
2:27
Let's first select the video container, which is full screen video container, and start applying the styles that we need to to this container in order to position our video as a background element
2:40
The first thing we want to do is set our position to relative, since we're going to absolutely position our video inside of this container
2:47
and it needs to have something to relatively position itself off of. Next, we want to apply a height, and that height is going to be the full size of our screen, so we want to use 100 view height
2:58
which essentially says 100% of the current view height, and we want to do the same thing for the width
3:04
so we want to do 100 view width here instead of view height. And then we want to do lastly, overflow of hidden so that any of the video excess on either the sides of our screen or the top of bottom of our screen will be completely cut off and not just showing, so we won't be able to scroll side to side
3:23
Next, we want to select our video element, so that'll just be selected inside of our container
3:28
So we select our container, and then we want the video element inside of that container
3:33
And we want to position this absolutely inside of our container. And then all we need to do is somehow figure out a way to position this video perfectly inside of our container so that it's dead centered and takes up the entire space inside of our container without ruining the aspect ratio
3:51
The easiest way to do this is to set the width and the height to auto, which will keep the video aspect ratio perfectly in line with what the video aspect ratio of the actual file is, since the height and width will scale with the size of the video
4:07
The next thing we want to do is we want to set the minimum width to be 100% and the minimum height to be 100% as well
4:17
This now means that our video will either take up all of the available width or all the available height
4:23
and then the width or height will scale with the aspect ratio This means that our video will scale to take up the entire width and height of our object and it will keep its aspect ratio due to these width and height auto properties that we have here
4:38
But as you notice, we aren't seeing the center of our video, we're seeing just the top left corner
4:43
In order to fix this, what we can do is we can say top 50% and left 50%
4:50
which will position the origin essentially of our video in the dead center of our screen
4:56
Then, in order to move our video back so that it's in the center, we can use the transform
5:01
property with the translate attribute here, and we can say negative 50% in the X direction
5:08
and negative 50% in the Y direction, and this will move our video 50% of its own width to the left
5:16
and 50% of its own width to the, or own height, up, which means that the very center of our
5:22
video will be right in the middle of our screen. And if you save that, you see that we now see this
5:26
center of our video instead of the top left corner. The last thing we want to do is we want to add a Z-index here, which will tell us where our video
5:35
will show up in relation to the rest of our objects. So a low Z-index means that it will be behind objects and a high Z-index means it will be in
5:43
front of objects. And since we want our video container to be in the back, we're going to give it a Z-index
5:48
of negative 1, and as you can see, our text now shows up on top of our video
5:53
Next, you may notice that we still have scroll bars on the side. and a little bit of a margin inside of our window
5:59
And that's because HTML has margins on the body of the elements by default
6:05
So we'll just select HTML and the body elements. And we'll set the margin to be zero
6:11
And now if you say that, you'll see that we no longer have scroll bars, and our background takes up
6:15
the entire width and height of our screen. And even if we scale the size of our browser
6:20
you'll see that it continues to take up the entire width and height no matter what we do
6:24
And it's also always focused on the very center of our video instead of on the top left
6:29
Now what we want to do is we want to position the text inside of our video to be in the center
6:34
as opposed to in the top left corner. To do that, we'll use our video container here
6:39
Set the display equal to flex. We justify the content into the center And we also align the items to be at the start That way it be at the very top center of our entire video object Next all we need to do is style the actual
6:54
text to be exactly the same as in this example. In order to do that, we'll use our selector
7:01
for the full screen video content. And in here, we're going to just set a background color
7:07
of white, we're going to make the font color equal to a slightly grayish color. If we save that
7:17
you'll now see that we have our white background behind our text, but we need to scale the
7:21
size of our text and give it a little padding to make it look exactly like our text over here
7:26
So in order to do that, let's go down here, add a padding of 20 pixels on the outside on all
7:31
sides, and we'll increase the font size to be 70 pixels. And then we'll also add a mark
7:37
on the top in order to make it so that our text is not squished onto the very top of our screen
7:42
So we'll just add a margin of 100 pixels. And if you save that, you now see that we have our text
7:47
inside of our little white box here, and it's centered over the top of our entire video background
7:53
And now, if we wanted to change our video background to be smaller, for example
7:57
let's say we wanted it to be 500 pixels wide by 500 pixels tall
8:03
if we saved that, decrease our font size a little bit here, font size a little bit here to 30, you now see that our video is still perfectly centered inside
8:12
of our box, it's entirely responsive, and it doesn't expand outside of the bounds of the
8:18
box that we created, that's 500 pixels by 500 pixels, even though the aspect ratio of our original
8:23
video is not square. As you can see, creating a fully responsive background video is not as hard
8:30
as it seems, and it only takes a little bit of CSS in order to actually create that, especially
8:35
considering a lot of the CSS, such as everything for this content and all these flexbox
8:40
properties inside of our container are only for styling the text inside of our container
8:46
So I hope you guys enjoyed this video and learned a little bit on how to create responsive
8:50
background videos for your HTML page. If you guys did enjoy it, make sure to please leave a like down below and let me know
8:57
what other challenges you want me to cover in the future. Thank you guys very much for watching
9:02
Have a good day
#Video Sharing