Question

我想在下面的小youtube链接上显示并显示大。

我想 video1 video2 * video3 * 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上的点击。您可以使用图片替换播放列表中的iframe（例如视频缩略图）。

您可以获得某个Youtube-Video的缩略图

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>

这是DEMO

href与你管视频

1 个答案: