Как сделать такой плеер на видео из Youtube?

Question

[Lector]

Как сделать такой плеер на видео из Youtube? Видео будет из Youtube, но заказчик принципиально хочет вот такой его вид

Comments

[xmoonlight]

Роторный дисплей?)

Answer 1

[Александр Аксентьев]

Самый изи вариант, картинка любая => клик => замена картинки на плеер

Так же бонусом идёт то что плеер не грузит страницу при открытии сайта.(привет PageSpeed и прочие)

<img data-video src="image.jpg">

$('[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);
    });

Comments

[Lector]

Была такая идея) Если ничего не решится, так и сделаю) спасибо

Answer 2

[Владимир]

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

Comments

[Lector]

пробовал, ну он все равно показывает свою кнопку, логотип, и название вверху с кнопками Посмотреть позже, поделиться и т.д.

Answer 3

[xmoonlight]

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

Comments

[Lector]

Тоже пробовал, не хочет убирать название, свою кнопку и логотип

[xmoonlight]

Lector, клик по картинке с кружком обрабатываете и динамически создаёте плеер и сразу запускаете.

Answer 4

[profesor08]

Если не устраивает стандартный интерфейс плеера, то скрой плеер (opacity: 0) и показывай заглушку, по клику на которую показывай плеер и скрывай заглушку, при этом запускай воспроизведение. Таким образом у тебя ничего не будет скакать, прыгать, подгружаться и тд. Загрузка iframe с видео и так происходит асинхронно, так что париться не обязательно.