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 @productioncoderPlease 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.
Recent Comments