onClick将参数添加到url

时间:2016-07-20 06:48:41

标签: javascript youtube onclick

我正在尝试将带有自定义缩略图的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上添加autoplay参数,因此当隐藏时会将其更改为true。

我尝试过使用

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

但这不起作用。说实话,我没有JS的背景,也不知道我在做什么。有人可以帮我这个吗?只需将URL参数添加到给定的链接onClick。

谢谢。

1 个答案:

答案 0 :(得分: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并同时更改网址。