href與你管視頻

Question

我想clcik在小的youtube鏈接和顯示大。

我想視頻1視頻2 * VIDEO3 * VIDEO4顯示這樣 視頻鏈接---這只是顯示。

點擊這個視頻後，然後在同一頁的大視頻apear。

下面是代碼：

我真的很感激你的時間。謝謝

<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視頻的縮略圖像

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