What kind of video slider to take, with the video enlarged in the middle and reduced on the right and left?

Question

css

The site needs a slider that looks like this. Three videos are shown (so far there are only three). The one in the middle is bigger, the ones on the edges are smaller. The video will be from YouTube, i.e. You don't need your own player. When you click on one of the extreme videos, it should increase and stand in the center. Those. this carousel should scroll. Accordingly, the other two are reduced. A variant without scrolling is possible, because. there are only three videos so far. In this case, the central video is also initially enlarged, when you click, for example, on the right one, it becomes larger and starts playing, while the left and central ones remain small. I described it chaotically, but it seems clear =)
PS: now it's done with the help of slick, and everything basically works, except for one BUT. To watch the left or right video, you must first scroll with the arrow on the desired video and only then press play. You can, of course, press play and when it is on the right / left, but then it will be played there, small and sideways. So, as an option, I'm considering finishing this slider so that by clicking on the right / left video, it scrolls to the center and is already played there. This is what I'm doing right now, but so far without success.

Answer 1

Leave a slick.
The player has an api and an onPlayerStateChange callback that fires on play/pause. So in it, just rewind the slider to the slide you need.
https://developers.google.com/youtube/iframe_api_r...
However, you can try without api by wrapping the iframe in an additional block:
codepen.io/anon/pen/WxWjxG