onClick Parameter zur URL hinzufügen

Question

Ich versuche, ein Youtube-Video mit einem benutzerdefinierten Thumbnail auf meiner Website einzufügen. Deshalb habe ich diesen Code gefunden, den ich benutze.

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

Es funktioniert so weit, aber die automatische Wiedergabe macht hinter der Abdeckung Bild um das Video zu spielen. Also habe ich versucht, den AutoPlay-Parameter onClick hinzuzufügen, also ändert sich der Wert in true, wenn sich das Cover verdeckt.

habe ich versucht,

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

Aber das funktioniert nicht zu verwenden. Um ehrlich zu sein, ich habe keinen Hintergrund in JS und weiß nicht, was ich mache. Könnte mir bitte jemand dabei helfen? Fügen Sie einfach einen URL-Parameter zu einem gegebenen Link onClick hinzu.

danke.

Answer 1

Ich denke, du machst die Dinge nicht richtig.

Wenn Sie die URL des Iframe ändern, wird der Iframe neu geladen und nicht nur gestartet.

versuchen Sie dies:

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

dies die iframe zeigen und die URL der gleichen Zeit zu ändern.