与你的视频视频

Question

我想点击下面的小youtube链接，并显示大。

我想要video1 video2 *视频3* video4像这样显示视频链接--这只是显示。

单击此视频后，在同一页的大视频中追加。

以下也是代码：

我真的很感激你的时间。谢谢

<div style="position:absolute;left:20%;top:20%;height:60%;width:60%">
<iframe id="myvideo" src="http://www.youtube.com/watch_popup?v=vt4X7zFfv4k" 
style="position:relative;height:100%;width:100%"></iframe>
<div style="text-align:center">
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=LRBIVRwvUeE'">video1</a> | 
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=bT4WGQVmQf8'">video2</a> | 
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=Wz1W_omigwg'">video3</a> | 
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=LRBIVRwvUeE'">video4</a>
</div>
</div>

Answer 1

出于安全原因，您不能收听对iframe的单击。您可以将播放列表中的iframes替换为图像(例如。缩略图)。

你可以得到某个Youtube的缩略图-像这样的视频

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

因此，您需要像这样更新代码：

<div style="position:absolute;left:20%;top:20%;height:60%;width:60%">
    <iframe id="myvideo" src="http://www.youtube.com/watch_popup?v=vt4X7zFfv4k" style="position:relative;height:100%;width:100%"></iframe>
    <div style="text-align:center">
      <a href="#" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=LRBIVRwvUeE'">
        <img src="http://img.youtube.com/vi/W-Q7RMpINVo/1.jpg" />
      </a> |
      <a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=bT4WGQVmQf8'">
        <img src="http://img.youtube.com/vi/bT4WGQVmQf8/1.jpg" />
      </a>
    </div>
</div>

这是一个演示