1
00:00:00,120 --> 00:00:05,850
In this lecture, we are going to fix the video players whip using a plugin from tailwind.

2
00:00:06,180 --> 00:00:09,270
The player is appearing outside the bounds of the container.

3
00:00:09,570 --> 00:00:12,060
We need to adjust the whip before moving on.

4
00:00:12,390 --> 00:00:14,190
Working with media can be tricky.

5
00:00:14,520 --> 00:00:16,650
Radios come in all shapes and sizes.

6
00:00:16,830 --> 00:00:21,360
The width and height need to maintain a consistent aspect ratio.

7
00:00:21,810 --> 00:00:23,790
Writing the CIUSSS will be a pain.

8
00:00:24,120 --> 00:00:27,630
Luckily, we can avoid writing these costs ourselves.

9
00:00:28,260 --> 00:00:34,260
Tailwind has a class for adjusting the width of a video while preserving its aspect ratio.

10
00:00:34,680 --> 00:00:35,880
Let's give it a try.

11
00:00:36,270 --> 00:00:38,250
Open the clip template file.

12
00:00:40,740 --> 00:00:42,360
Search for the video tag.

13
00:00:42,660 --> 00:00:46,890
The classes must be applied to a surrounding element on the media element.

14
00:00:47,190 --> 00:00:53,580
Luckily, we have such an element on the div tag at a class called aspect video.

15
00:00:56,180 --> 00:00:58,760
There are various aspect ratios available.

16
00:00:59,060 --> 00:01:03,230
A majority of devices use a 16 by nine aspect ratio.

17
00:01:03,560 --> 00:01:06,650
You're more than free to change a different aspect ratio.

18
00:01:06,740 --> 00:01:13,040
But 16 by nine is considered a standard refer to the documentation for the various ratios.

19
00:01:13,190 --> 00:01:15,350
Let's check out the player in the browser.

20
00:01:17,080 --> 00:01:17,560
Great.

21
00:01:17,830 --> 00:01:23,770
The video fits within the bounds of the container in the next lecture, we can finally start loading

22
00:01:23,770 --> 00:01:25,690
the relevant clip in the player.