如何更改iframe视频背景图片？

Question

我正在使用iframe在我的网站上显示视频，并希望更改播放按钮的样式。

这是我的代码：

.ytp-cued-thumbnail-overlay-image {
	background: url(https://www.w3schools.com/css/trolltunga.jpg);
}

button.ytp-large-play-button.ytp-button {
    z-index: -1 !important;
}

<iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

如何放置背景图像并更改按钮样式？

Answer 1

您可以使用javascript尝试以下代码。

http://login.app/://login.app/

#background-video {
        background-image: url('http://placehold.it/580x460');
        background-repeat: no-repeat;
        padding: 50px;
}

#vidwrap {
        background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow:hidden;
        background-repeat: no-repeat;
        width:480px;
        height:360px;
        cursor:pointer;
}