如何更改我的 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试试下面的代码。

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

    <div id="background-video">
        <div onclick="play();" id="vidwrap"></div>
    </div>
    
    
    <script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>