Как поменять цвет кнопки play для видео с youtube внутри iframe?

Question

[eafedorow]

Есть Iframe, который загружает видео с youtube:

<iframe 
        loading="lazy"
        class="videos__item-link"
        src="https://www.youtube.com/embed/FA3steLV-C0">
  </iframe>

Цвет кнопки по умолчанию красный, по дизайну необходим черный.



Как поменять цвет кнопки?

P.S. Пытался сделать свою кастомную кнопку, при нажатии которой она бы скрывалась и подгружался iframe с параметром autoplay. Autoplay не работает на мобильных версиях (приходится два раза нажимать на плей). Подойдет ответ как изменить стандартный цвет кнопки или же как заставить на мобильных воспроизводить iframe через свою кнопку.

Comments

[Вадим]

Правила сервиса:

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, codepen- https://codepen.io/). Размещение фрагментов кода в виде изображений запрещено.

[Вадим]

https://www.youtube.com/watch?v=4JS70KB9GS0&t=210s
https://stackoverflow.com/questions/7281765/how-to...
Это пробовали?

[eafedorow]

Вадим, все эти решения упираются в то, что на мобильных устройствах это не работает из-за ограничения autoplay

[Вадим]

eafedorow, Вы прочитали все ветки на stack overflow? autoplay=1, mute=1, allow="autoplay"? Всё попробовали?
На сафари для элемента видео ещё нужен playisinline атрибут, но как это через айфрейм пропихнуть или через гет параметр - не смотрел.

Поменять кнопку внутри iframe нельзя из-за security policy

[eafedorow]

Вадим, да, пробовал. Пока что пришел к выводу из-за security policy autoplay невозможен на мобилках и это можно решить только кастомным плеером. Либо принять факт, что на мобильных придется нажимать play два раза.

Answer 1

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

Я бы на вашем месте не мучался, взял бы https://plyr.io/ и сделал свой дизайн.