替换播放按钮

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;
}