替换播放按钮

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