0

I'm currently learning HTML and CSS, and was curious how the classes work. So I made an page in HTML with a Youtube embedded video in it. Then using CSS I set this

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

This was supposed to change the play button with the image stored locally named bigplay.png

But it remained the the same play button. Can someone say what am I doing wrong here?

Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
mrnobody
  • 3
  • 1
  • 4
  • 3
    Please provide a minimum working example. Also use triple backticks for big code blocks, rather than single backticks. – JosephGarrone Jan 27 '17 at 09:49
  • I have hosted it here - [link](http://majordwarf.cu.cc/123/index.html) I tried to change the Youtube play button by using it's class, I found the class via Inspect Element. – mrnobody Jan 27 '17 at 09:55

2 Answers2

0

Youtube is embedded as an iframe meaning CSS placed on the parent page won't propagate down to it's content. This leaves you with two alternatives:

  1. Clone the iframe content to add your own styling

  2. Embed youtube without using an iframe

Edit

Looking into option 1 I have attempted the following (using PHP to preprocess the iframe content and inject your CSS before serving the page): https://www.tehplayground.com/Hjk19qDWeiwIWkKl

It appears there are a number of security processes in place to prevent you from doing this.

If you are new to CSS and HTML as you say and are using this as a learning exercise this is certainly not a trivial task. I would highly suggest starting with some more basic exercises.

Community
  • 1
  • 1
thodic
  • 2,229
  • 1
  • 19
  • 35
  • I tried the second option but still the CSS is not being applied. The Play button is is till the default, the one from Youtube. – mrnobody Jan 27 '17 at 10:08
0

I have inspect it and I changed these properties it's working. The play button is an svg so you need to hide it and change the parent with background play image. If I got you what you want.

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

button.ytp-large-play-button svg { 
        display: none;
}
Yonas Hailu
  • 853
  • 7
  • 20
  • I tried it, and its not working. I can make it work if I do Inspect Element in Chrome or Firefox. But when I refresh the page its gone. – mrnobody Jan 27 '17 at 12:12