Build Youtube in React 12: Horizontal Video Preview
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?
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
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
VideoPreview in horizontal mode is pretty straight forward.
We added a new boolean prop to our
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
However, the actual magic lies in our
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
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
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.