如何更改我的iframe視頻背景圖像？

我正在使用iframe在我的網站上顯示視頻，並且想要更改播放按鈕的樣式。如何更改我的iframe視頻背景圖像？

這裏我的代碼：

.ytp-cued-thumbnail-overlay-image { 
 
\t 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>

我怎樣才能把我的背景圖片和更改按鈕的造型？

來源

2017-06-21 Wosley Alarico

試試這個線程.. [自定義播放按鈕YouTube視頻]（https://stackoverflow.com/questions/32627887/youtube-custom-play-icon） – vijay

您可以使用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>

來源

2017-06-21 11:09:36

感謝它的工作原理。我仍然希望能夠按鈕的樣式，但你的代碼工作，我投票] –

如何更改我的iframe視頻背景圖像？

回答

相關問題