CODEWITHSUNDEEP
javascriptyoutubeonclick
ThomasB
ThomasB

Reputation: 402

onClick add parameter to url

I am trying to insert a youtube video with a custom thumbnail to my website. Therefore I found this code, which I am using.

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

It works so far, but the autoplay makes the video play behind the cover image. So I've tried to add the autoplay parameter onClick, so it changes to true as the cover hides.

I have tried to use

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

But this isn't working. To be honest, I have no background in JS and do not know what I am doing. Could anybody please help me with this? Just adding a URL parameter to a given Link onClick.

thank you.

Upvotes: 0

Views: 827

Answers (1)

蒋宜通
蒋宜通

Reputation: 56

I think you are not doing things the right way.

when you change the url of the iframe, the iframe will reload, not just start to play.

try this:

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

this will show the iframe and change the url the same time.

Upvotes: 1

Related Questions