Name: レスポンシブ動画の背景チュートリアル (Responsive Video Background Tutorial)
Uploaded: 2021-01-14T10:24:06.000Z
Duration: 9 min 3 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Welcome to this week's CSS Challenge video.

This challenge was submitted to me in the comments of the last video by Lucky Strike G F X er.

So if you want your challenge to be completed by me, make sure to comment it down below in this video.

In this video, the challenge was to create a responsive video background on the right here.

I have an example of a full page version of those response of video background, but it's gonna be applied to any size element, no matter how small or large air what's get started.

By creating the HTML that we're going to need for this page, Theo, first thing we want to do is create a rapper for a video in the content inside of our video.

We'll give a class of full screen video container, and inside of here will put both our video object as well as the content that's displayed over top of our video.

Object was first created video element, and we'll apply a few different attributes to it.

The first will be autoplay, which will make our video play as soon as our browser loads, we want to apply loop so that our video will play from the beginning as soon as it gets to the end.

And lastly, the property muted so that our video won't make any sounds that will in the wire user.

Next, we need to who supplies source for what our video is coming from.

In our case, we only are going to have one source and that source has an attribute which is sourced again, which is going to say where that video was coming from, just like in a trough, for example.

And we have a file called Background video dot mp four and then we need to tell our video source attributes what type this is.

And in our case, it's going to be video slash and P fourth.

Since this is an MP four file, there we go.

And now we want to create an actual div for the content that's going to go over top of our video Down here was created another dip.

We're gonna give it a class of full screen video content.

This is the content inside of our video in here what is going to put the texture see on the screen of Paradise awaits.

Now let's open that up with Life Server and 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's no problem will be fixed in that waiter.

Let's jump into our styles that CSS and start applying the styles we need in order to take this page and make it look exactly like this page.

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.

The first thing we want to do is set our position to, Relative says.

We're going to absolutely position our video inside of this container, and it needs to have something to relatively position itself off of next.

We want to buy a height, and that height is going to be the full size of our screen.

We want to use 100 view height, which essentially says 100% of the current view height.

We want to do the same thing for the width.

We want 200 view with here instead of you height.

And then we want to do lastly, over full of hidden so that any of the video xs on either the sides of our screen or the top of autumn.

Our screen will be completely cut off and not strolling, so we won't build a scroll side to side.

Next, we want to select our video element that will just be selected are inside of our container.

So we select our container and then we want the video element inside that container.

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 in 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.

The easiest way to do this is to set the wit and the height toe auto, which will keep the video aspect ratio perfectly in line with what the view aspect ratio of the actual file is.

Since the height and width will scale with the size of the video.

The next thing we want to do is you want to set the minimum with to be 100% and the minimum height to be 100%.

Well, this now means that our video will either take up all of the available with or all the available height, 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.

But as you notice we aren't seeing the center of our video, we're seeing just the top left corner in order to fix this.

What we can do is we can stay top 50% and left 50% which will position the origin essentially of our video in the dead center of our screen.

Then, in order to move our video back so that it's in the center, we can use the transform property with the translate attribute here, and we can say negative 50% in the extraction and negative 50% in the wind direction and this will move our video 50% of its own width to the left and 50% of its own whipped her own hype up, which means that the very center of our video will be right in the middle of our screen.

And if you say that you see that we now see the center of our video instead of the top left corner, the last thing we want to do is you want at a Z index here, which will tell us where are video will show up in relation to the rest for objects.

So lows, the index means that it would be behind objects, and Heisey Index means it will be in front of objects.

And since we want our video container to be in the back, we're gonna give it a Z index of negative one.

And as you can see our tax nationals up on top of our video next, you may notice that we still have scroll bars on the side and a little bit of a margin inside of our window.

And that's because HT mouth has margins on the body of the elements by default.

So we'll just select HTML and the body elements, and we'll set the margin to be zero.

And now, if you say that, you'll see that we know I have a scroll bars and our background takes up the entire width and height of our screen.

And even if we scale the size of our browser, you'll see that it continues to take up the entire width and height no matter what we do.

And it's also always focused on the very center of our video instead of on the top left.

Now we want to do is we want to position the text inside of our video to be in the center as opposed to in the top left corner.

To do that, we'll use our video container here said that his play Equal to Flex will justify the content into the center, and we'll also align the items to be at the start.

That way, it'll be at the very top center of our entire video object.

Next, all we need to do this style, the actual text to be exactly the same as in this example.

In order to do that, we'll use our selector for the full screen video content and in here we're going to just set a background color of weight.

We're going to make the font color equal to a slightly grayish color if we say that, you'll now see that we have our white background behind our text.

But we need to scale the size of our text and give it a little padding to make it look exactly like our text over here.

So in order to do that, what's going on here at a padding of 20 pixels on the outside on all sides, it will increase the farm size to be 70 pixels, and then we'll also add a margin on the top in order to make it so that our text is not squished on to the very top of our screen soldiers at a margin of 100 pixels.

If you say that you now see that we have our text inside of our little white box there and it's centered over the top of our entire video background.

And now if we wanted to change our video background to be smaller, for example, let's say we wanted it to be 500 pixels wide.

I have 500 picks those tall we saved that decrease our font size a little bit here to 30.

You now see that our video is still perfectly centered inside of our box.

It's entirely responsive, and it doesn't expand outside of the bounds of the box that we created.

Even though the aspect ratio of our original video is not square.

As you can see, creating a fully responsive background video is not as hard as it seems.

And it only takes a little bit of CSS in order to actually create that, especially considering a lot of the CSS.

Such a everything for this content and all these fucks parks properties inside of our container are only for styling the text inside of our container.

So hope you guys enjoyed this video and learned a little bit on how to create responsive background videos for your HTML page you guys did enjoy makes you to please leave a like down below and let me know what other challenges you want me to cover in the future.