Preview

Start a free Courses trial
to watch this video

The Video Container

Name: The Video Container
Uploaded: 2013-06-17T20:38:47Z
Duration: 735 s
Description: In this video, we'll work on the center column in our layout. This column will act as the container for our HTML5 video.

12:15 with Nick Pettit

In this video, we'll work on the center column in our layout. This column will act as the container for our HTML5 video.

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[?music?] 0:00

[Master Class: Fluid Grids: CSS: Part 2] 0:02

[Nick Pettit] So far, we've added some of the basic essentials to our CSS 0:05

and we've started our fluid grid calculations. 0:10

Now we're going to move on to our center column 0:13

which will contain our HTML5 video. 0:16

First, we're going to style the div called phone, 0:20

so we'll go ahead and select that #phone { 0:24

and we need to first apply a width; however, this of course, has to be a fluid width 0:28

so we need to jump over to Photoshop to go ahead and calculate that. 0:34

So let's go ahead and switch over 0:39

and this is going to be the center column, so we need to go ahead and grab that 0:42

and it looks like the width is 310 0:48

and the context is the entire width of the page, 950, 0:52

so we can switch over to our calculator and calculate that. 0:57

310, which is our target divided by the context of 950 1:01

gives us that number there: 0.326315789473684 1:07

and we'll copy it, switch over to TextMate, paste it in, move the decimal point over, 1:10

and then make it a percentage, just like that. 1:17

And we should go ahead and put a comment on the right side 1:23

so that we know what it is we're actually calculating here. 1:27

There we go. 1:32

We'll go ahead and float this to the left because, of course, it is a column. 1:33

We'll set the background to the image that we created earlier, 1:40

which is in the images directory, so we need to jump out of the CSS directory, 1:44

go into the /images/ directory, and the image we want is called phone.png. 1:49

We'll set that to top center and no-repeat. 1:56

Next, we're going to set a background-size on this, 2:04

and of course, background-size is a CSS3 property, so we need to use vendor prefixes. 2:07

We'll start out with -webkit-background-size:. 2:13

We'll set the width to 100% and we'll set the height to auto. 2:18

So by setting a width of 100% and setting the height to auto, 2:25

the width will fill up the container 2:29

and whatever's left over will just fill up the rest, 2:32

and will maintain the aspect ratio of the image. 2:35

This is slightly different from what we've been doing previously 2:38

where we've actually been putting images inside of our markup. 2:42

By setting a background size like this, it allows us a little bit more flexibility 2:46

and allows us to actually put an HTML5 video on top of this image. 2:52

So next, we'll go ahead and do the Mozilla styling, 2:59

which is actually exactly the same as the webkit styling. 3:02

We just need to change the vendor prefix -moz. 3:05

And then finally, we'll go ahead and have a fallback 3:08

that will support browsers that actually don't need a vendor prefix. 3:13

Next, we need to set a margin-left on this column 3:19

and of course, we need to calculate the fluid grid for this, 3:23

so we'll go ahead and switch over to Photoshop, 3:27

select our marquee tool, 3:30

and the margin-left here will be everything to the left of the phone 3:33

before we hit the left column. 3:38

So it looks like we have about 40 pixels here, 3:40

and we want to calculate this against the entire width of the page, 3:44

so we'll go ahead and switch over to our calculator and say 3:48

40 divided by 950, which gives us about 4%. 3:52

We'll copy that number, switch over to TextMate, paste it in, 3:57

move the decimal point, and then make it a percentage. 4:01

We should also put the calculation in the margin, 4:06

just so we know what's going on, so we'll say 40 divided by 950. 4:12

* 40 / 950 */ 4:16

And then finally, we're just going to put some margin-top, 4:17

and really, you can put whatever you want here. 4:20

I'm going to put 35px just to give it a little bit of space from the top. 4:23

Now next, we need to move on to the video container, 4:28

so let's go ahead and switch back to our markup just so we can see what's going on here. 4:31

We just styled the phone, which is basically just the center column, 4:37

and then inside of our center column, we have this video container div. 4:42

Inside the video container div, we have the actual HTML5 video. 4:47

But first, let's go ahead and style this video container. 4:52

So we're going to go ahead and switch over to our CSS 4:56

and we'll scroll down here just a little bit. 5:00

We're going to first select our #phone, which is, of course, our center column 5:03

and then we'll select the #video_container {. 5:07

We're going to set a width on this and this of course needs to be a fluid width 5:12

so we're going to go ahead and switch over to Photoshop 5:16

and we're going to open up our Layers panel here 5:19

because this phone is actually a Smart Object. 5:24

So we're going to go ahead and open that up 5:28

and we need to calculate a couple of things here. 5:31

First, we'll just start off with the width. 5:36

Now, I'm going to select everything so that we can actually see the entire width of the phone, 5:39

which appears to be 1021. 5:45

So we'll go ahead and switch over to TextMate and record some of these values. 5:49

So 1021 = width of phone, 6:00

1978 = height of phone, 6:04

and then we're going to measure the video area, and this will be where our HTML5 video 6:18

is actually contained. 6:24

So the width is 853 and the height is 1280, 6:26

so we'll go ahead and write that down. 6:29

853 = width of video area 6:33

1280 = height of video area 6:37

And now, we're ready to actually calculate the width of the video container 6:42

so we want to go ahead width: ; /* 6:47

and take our target of 853, which is the width of the video area, 6:56

and divide that into the context, which is the width of the entire phone. 7:00

So we'll go ahead and switch over to our calculator, clear out what we have, 7:05

and say 853 divided by 1021, 7:09

and we'll go ahead and copy that value from our calculator and paste it in, 7:16

move the decimal point, 7:20

set it as a percentage, and now we have our width. 7:24

We also need to calculate our margin, and to do that, 7:29

we do need to switch back to Photoshop and make a few more measurements. 7:32

Now, the video is actually going to be centered inside of this phone element 7:37

so the only margin that we need to calculate is going to be on the top and bottom. 7:42

Remember, in our fluid layout, this phone could potentially be resized, 7:47

so we need to resize the video with that and that means that our top and bottom margins 7:53

need to be percentages, so we'll go ahead and select the top margin here, 7:59

starting from the top of the video container going all the way to the top of the phone. 8:05

The height there is 352 so let's go ahead and record that value in TextMate. 8:11

So 352 = height of area above video. 8:18

And then we need to get that bottom margin 8:25

so we'll go ahead select that, and it looks like the height there is 346 8:28

so we'll go ahead and record that. 8:35

So 346 = height of area below video. 8:37

And now, we're ready to go ahead and do our calculations. 8:45

First, I'm going to calculate the top margin 8:49

which will be 352 divided into the width of the phone 8:53

Now remember, the way that margin is calculated 9:01

is into the width, so we can't actually calculate this into the height. 9:04

I know that seems a little bit strange, but just bear with me. 9:08

So we'll go ahead and copy this because we also need to do this for the bottom margin. 9:13

So that will be 346 divided by 1021, 9:22

and now we can go ahead and switch over to our calculator, 9:27

clear out what we have, and do our calculations. 9:30

So 352 divided into the width of the phone gets us that number there. 9:34

We'll go ahead and move the decimal point and set it as a percentage. 9:42

We want the top and bottom to be set to auto 9:48

so we'll go ahead and put in that value 9:52

and then, we're ready to do the bottom margin, which is 346 into 1021, 9:55

so let's go ahead and do that calculation, 346 / 1021. 10:02

We can go ahead and paste in that value, 10:11

just like that. 10:18

And we'll go ahead and move those over 10:21

just so they all line up nicely 10:25

and now we have our video container. 10:27

So let's go ahead switch over to the browser and refresh. 10:31

And now, we have our three columns, so we have our column on the left, 10:37

which is our header, our center column, which is the phone, 10:41

and our column on the right, which is miscellaneous. 10:46

And inside of the phone in our center column, 10:49

we have our HTML5 video contained inside of the phone. 10:52

Now, my browser window is just set to some arbitrary size, 10:57

but we can already see that it's working pretty well. 11:01

If we go ahead and actually resize the browser window, 11:04

you can see that the HTML5 video keeps up with the size of the phone. 11:07

In my opinion, what we just covered is the most complex portion of this entire project, 11:14

mostly because of the way top and bottom margins are calculated 11:20

when using percentages. 11:24

When using percentages for the margin width value, 11:26

the CSS2.1 box model specification under section 8.3 says 11:29

the percentage is calculated with respect to the width of the generated box's containing block. 11:35

Note that this is true for margin-top and margin-bottom as well. 11:42

The important word there is "width," 11:46

so in other words, margin-top and margin-bottom percentages 11:49

are calculated with respect to the containing block's width and not the height, 11:52

as you might expect. 11:58

This is why in our fluid grid calculation we set our target to the top and bottom margins 12:00

but we set our context to the width. 12:05

We then divided the top and bottom margins by the width of the entire element. 12:08

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace