How to make such player on Youtube video?

Question

YouTube

How to make such player on Youtube video? The video will be from Youtube, but the customer basically wants it to look like this

Answer 1

The most easy option, any picture => click => replacing the image with the player
. Also, the bonus is that the player does not load the page when the site is opened. (hello PageSpeed ​​and others)

$('[data-video]').click(function() {
        video = '<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/asdasdasd?controls=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        $(this).replaceWith(video);
    });

Answer 2

https://developers.google.com/youtube/player_parameters

Answer 3

API
https://habr.com/en/post/306726/

Answer 4

If you are not satisfied with the standard interface of the player, then hide the player (opacity: 0) and show a stub, by clicking on which show the player and hide the stub, while starting playback. Thus, you will not have anything to jump, jump, load, etc. Loading an iframe with a video is already asynchronous, so it's not necessary to take a steam bath.