Build Youtube in React 12: Horizontal Video Preview

1. Overview

You saw this mockup now a couple of times.

Click on the image to see the image in high resolution.

In the last tutorial, we created the Video component (shown here in blue). We still need the related videos component shown above in a light green.

First, let’s see what we’re up to.

But wait, before we jump straight into building it, can’t we reuse something we have?

Remember our VideoPreview component? Right now our VideoPreview component places the video information (title, channel, views) directly below the video thumbnail. If we refactor our VideoPreview component so that the video information can also be displayed directly next to the video image thumbnail, we save a lot of work.

So let’s first update our VideoPreview component so that it can display the video’s title, channel, views etc. horizontally as well.

2. Add horizontal mode to VideoPreview

2.1 Making VideoPreview flexible

Currently, our VideoPreview is using CSS-Grid to create a vertical layout. We want our VideoPreview to be able to display the title, view count etc. both horizontally and vertically.

Let’s look at this image. Click on the image to see it in high resolution.

We always display the image and the video duration marked in green above. In case we want a horizontal VideoPreview, our grid just has one row and two columns. In case we want a vertical VideoPreview, we display a grid with two rows, but only one column.

2.2 CSS grid lines explained with VideoPreview

Do you remember that image with the horizontal and vertical lines? If we want to also allow horizontal video previews, we have to rethink how lay out our grid.

 Click on the image to see it in high resolution.

We will always display the green cell with the video thumbnail. However, if we use a horizontal preview, we want our grid to have one row and two columns. In this case our video metadata cell (the blue one) just moves into the second column. Actually pretty easy, isn’t it?

I’ve marked the grid lines in the image above so that it is easier to understand our CSS-Grid logic we are about to write.

All right 😁, enough talk, let’s jump into the code.

2.3. Horizontal VideoPreview

Since we use Grid, implementing VideoPreview in horizontal mode is pretty straight forward.

We added a new boolean prop to our VideoPreview called horizontal. If the VideoPreview is supposed to display its content horizontally then this prop must be set. To see the result of our efforts, we removed our Video component in Watch.js and replaced it with a both a vertical and a horizontal VideoPreview element.

However, the actual magic lies in our CSS. VideoPreview's default behaviour is to show its content vertically. To show its content horizontally, we just provide a more specific CSS rule to override the standard behaviour. So we basically say: if our .video-preview element has a class .horizontal as well, we would like to apply different additional CSS.

In horizontal mode, VideoPreview only has one row and two columns. Since the first cell is supposed to contain our video thumbnail, we give the first column a width of 210px.  Why? Well because the original Youtube app gives a video thumbnail image a width of 210px as well. We would like to stay consistent here.  In addition, our .video-info content (video title, …) now gets rendered in the first row and the second column.

The cool thing here is that we just have to change the layout of our grid a little bit, but can leave the existing markup and CSS classes as they were before.

You may have noticed the column-gap property. This attribute says that we want a 4px distance between all of our columns. We do that to have a little bit of whitespace before our .video-info div is rendered.

Aaaand here’s the result. Click on the image to see it in high resolution.

Nice, isn’t it 🤓

2.5. Updating VideoPreview tests

Since we now have a new prop, it makes sense to add a new snapshot test for our all new horizontal mode.

Note that I have changed the description of the first test, so we can clearly distinguish the horizontal and vertical test.

3 Wrap Up

We’re getting there 👨‍💻. In the next tutorial we will start working on our related videos component.

As always, you can find the 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.