将不同的链接分配给不同的图像并让它在 iframe 容器上播放分配的 (youtube) 链接

Posted 2023-05-09

【中文标题】将不同的链接分配给不同的图像并让它在 iframe 容器上播放分配的 (youtube) 链接

【英文标题】：Assigning different links to different images and having it play the assigned (youtube) link on the iframe container

【发布时间】：2015-08-05 08:29:19

【问题描述】：

所以我想要的是什么； 点击“img1”后，“video here”区域会显示“video1”，“text”区域会显示“text1”。

点击“img2”后，同样的事情将“text”区域中的“text1”替换为“text2”，并将“video here”区域中的“video1”替换为“video2”。

有什么建议吗？目前还没有代码。只是想知道是否有人对如何开始这个有基本的想法，因为我对 javascript/jquery 真的很陌生。

最好使用指向 youtube 视频的直接网址。

提前致谢。

【参考方案1】：

首先在图片中，添加您要播放的 youtube 视频的链接

<img src='image' href="javascript:void(0)" onclick="jQuery('#video-div').attr('src','//www.youtube.com/embed/S-JtVTTMU2A?autoplay=1');jQuery('.video').show();"  />

现在创建一个 div 来显示其中的视频。

<div class="video">
<iframe id="video-div"   src=""  frameborder="0" allowfullscreen></iframe>

如果要更改文本，请在单击 img 时使用此代码

document.getElementById("idname").innerhtml = 'your text';

希望这可行

【讨论】：

确实如此！非常感谢！

【参考方案2】：

您好，我希望我的想法是正确的，但我已经编写了一些代码，希望对您的问题有所帮助。

这是我的结果：http://jsfiddle.net/6m92mkj8/2/

<a href="YOUTUBE_URL" title="VIDEO_TITLE"><img src="IMG_URL" ></a>

我保持我的代码干净，并且有点注释让你理解。

我希望这会有所帮助。

【讨论】：

正是我想要的。谢谢！！这是一个巨大的帮助。我对javascript和jquery真的很陌生，你的代码很干净，我几乎立刻就理解了。非常感谢！！可能性有多大，我也是“肮脏的脑袋”的忠实粉丝。啊哈哈。

好兄弟，很高兴能帮上忙！

又一个简单的问题。你从哪里得到这个的 jQuery src 文件？

因为它可以在 jfiddle 上运行，但由于某些奇怪的原因不适用于我的 html 项目。