onClick將參數添加到網址

Question

我試圖用自定義縮略圖將YouTube視頻插入我的網站。因此我找到了這個我正在使用的代碼。

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" /> 
</div> 
<div style="display:none"> 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe> 
</div> 

它到目前爲止工作，但自動播放使視頻播放封面圖像後面。所以我嘗試在onClick上添加自動播放參數，所以在封面隱藏時它會變爲true。

我曾嘗試使用

<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.href + '?rel=0&autoplay=1'; this.style.display='none'"> 

但是，這是行不通的。說實話，我沒有JS的背景，也不知道自己在做什麼。有誰能幫我解決這個問題嗎？只需將URL參數添加到給定的Link onClick即可。

謝謝。

Answer 1

我覺得你不是正確的做法。

當您更改iframe的網址時，iframe將重新加載，而不僅僅是開始播放。

試試這個：

<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.children[0].src='https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1'; this.style.display='none'"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" /> 
</div> 
<div style="display:none"> 
    <iframe width="420" height="315" frameborder="0" allowfullscreen> 
    </iframe> 
</div> 

這將顯示在iframe和更改URL同一時間。