Build Youtube in React 14: Laying out Youtube Watch component

1 Overview

Now that we have our Video component and our RelatedVideos component in place, we can start thinking about the overall look of the Watch component.

Below you will find the components marked with different colors. Click on the image to see it in high resolution.

For our Watch component’s layout, we’re going to use CSS Grid. Therefore, let’s abstract the image above a little bit.

2 Watch component layout

The HeaderNav is already provided by AppLayout, so we don’t have to take care of that.

It is clear, that we will have a grid with two columns. The column on the right will be pretty much occupied by our RelatedVideos component.

Therefore the remaining components have to be placed in the first column.

At first we will put in the Video component. After that we’ll display the typical Youtube info box and the video’s metadata (e.g. views, channel name).

We will place a component that displays the video’s comments with infinite scroll below our video info box. We will build this later on as well.

Since we currently have our Video and our RelatedVideos component, let’s put them in first. We will also add some placeholders for the components that will follow.

2.1 Building Watch component with CSS grid

With CSS-Grid, things can get quite easy.

Note that we added placeholder divs with a fixed height for the video metadata, the video info box and the comments component. We used inline CSS styles here because we will replace the divs with the actual components later on.

You probably already saw that CSS-Grid sort of messes with the text in our video info box placeholder div and adds a line break. But that’s all right. We will remove it later on anyway.

Our parent element is a div with the class .watch-grid. We make this class a Grid container and state that there will be 4 rows and two columns. So we’re basically creating a 4x2 grid. Since we don’t want to be specific about the height of our rows, we say that Grid should figure out the rows’ heights on its own. That’s why we specify auto three times in grid-template.

The fourth column is special. We set its height to 1fr. Since this is the only element that uses the fr unit, this means that it will take all the available whitespace. This makes sense because our comments component will support infinite scroll and display a potentially very large amount of comments.

We know that the related videos component should be 402px wide. At least that’s the width in the original Youtube application. Therefore, we make the constraint that the right column must have a width of 402px and that the left column should be sized automatically.

2.2. Positioning components with CSS Grid

We assign different classes to our components to place them correctly in the grid. Our video will be in the top left cell. Therefore we put it in the first column (i.e. between the first and the second vertical grid line) by setting grid-column: 1 / 2. Our video will also be in the grid’s first row which is why we specify grid-row: 1 / 2.

The metadata should be placed directly underneath our video. We put it into the second row by setting grid-row: 2 / 3. This places the component between the second and the third horizontal grid line. Note that currently our grid does not have any visible borders. The video info box is placed in the third row. Comments go into the fourth row.

The only thing that’s worth mentioning with .related-videos is that we place it in the second column. Hence, we specify grid-column 2 / 3. We want our related videos to span all the available rows. Since it is placed in the second column, it won’t interfere with the rest anyway. Therefore we say that it should span over four grid tracks, i.e. over all the rows we have.

2.3 Intermediate result

The overall layout seems to be fine. However, everything looks a little bit crammed in. We need more whitespace.

We just add a padding on the left, right and top. We also specify a column-gap of 24px. This means that the gap between all columns will be 24px. 24px is not a magic number I came up with. It’s also the spacing the original Youtube app uses.

In addition, we also make use of the grid-row-gap property so that our grid rows have enough air to breathe. 

Click on the image to see it in high resolution.

3 Tests

We did not add some tests for our Watch component yet. Since it doesn’t accept props or reaches out to an API, we can only test whether it renders.

4 Wrap Up

We’re getting there. Our Watch component gets better and better. Nice 😁.

As always, you can find this project’s code on our Github repository.

Follow @productioncoder

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.