0

Is there any way to change YouTube iframe play pause button using css? I am using multiple iframes and i want to change that red play button.

I have tried

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

But it's not working.

LeoDog896
  • 3,472
  • 1
  • 15
  • 40
Ghost
  • 53
  • 4

1 Answers1

1

In short, you can't.

Because:

You have to use Javascript to change the style inside <iframe>.

To do this, you first get the DOM element

let redPlayButton = document.getElementById('youtube-iframe').contentWindow.document.getElementsByClassName('ytp-large-play-button')[0];

and then make changes to it:

redPlayButton.style.background = "https://something-here";

However, according to the Same-origin policy, you can only do this to an <iframe> element which is coming from your own server.

You can't access an <iframe> with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin.

Thaiminhpv
  • 314
  • 2
  • 10