我正在尝试将带有自定义缩略图的 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 参数添加到给定的链接 onClick。
谢谢。
最佳答案
我认为你没有以正确的方式做事。
当您更改 iframe 的 url 时,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。
关于javascript - onClick 添加参数到 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38474171/