javascript - 将不同的链接分配给不同的图像，并使其在iframe容器上播放分配的(youtube)链接

Question

所以我想要的是什么；
单击“img1”后，它将在“此处视频”区域显示“video1”，并在“文本”区域显示“text1”。

然后单击“img2”，同一件事将在“文本”区域中将“text1”替换为“text2”，并在“此处视频”区域中将“video1”替换为“video2”。

有什么建议么？到目前为止，尚无代码。只是想知道是否有人对如何启动它有基本的想法，因为我真的是javascript / jquery的新手。

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

提前致谢。

Answer 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" width="500" height="500" src=""  frameborder="0" allowfullscreen></iframe>

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

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

希望这行得通