Заменить кнопку воспроизведения

Question

В настоящее время я изучаю HTML и CSS, и мне было любопытно, как работают классы. Поэтому я сделал страницу в HTML с встроенным видео в Youtube. Затем с помощью CSS Я установил этот

.ytp-large-play-button-bg { 
    background:url("bigplay.png"); 
} 

Это должен был изменить кнопку воспроизведения с изображением, хранящимся локально по имени bigplay.png

Но он оставался на ту же кнопку воспроизведения. Может кто-то сказать, что я делаю неправильно здесь?

Answer 1

Youtube встроен как iframe, что означает, что CSS, размещенный на родительской странице, не будет распространяться до его содержимого. Это оставляет вас с двумя альтернативами:

1. Clone the iframe content to add your own styling

2. Embed youtube without using an iframe

---

Редактировать

Глядя в вариант 1 я попытался следующее (с использованием PHP для предобработки содержимое iframe и вставляйте свой CSS перед тем, как выполнять страница): https://www.tehplayground.com/Hjk19qDWeiwIWkKl

Похоже, что существует ряд процессов обеспечения безопасности, которые препятствуют этому.

Если вы новичок в CSS и HTML, как вы говорите, и используете это как учебное упражнение, это, конечно, не тривиальная задача. Я очень хотел бы начать с некоторых более простых упражнений.

Answer 2

Я осмотрел его, и я изменил эти свойства, это работает. Кнопка воспроизведения - это svg, поэтому вам нужно скрыть ее и изменить родителя на фоновое воспроизведение. Если я получу то, что ты хочешь.

button.ytp-large-play-button { 
    background: url(bgimagesomethpath); 
    height: value; 
    width: value; 
} 

button.ytp-large-play-button svg { 
     display: none; 
}