切換嵌入式YouTube視頻播放與圖像

我期待有一個嵌入的YouTube視頻與下面的幾個圖像，對應於不同的YouTube視頻。我想設置它，以便點擊圖片時，上面的視頻會更改爲與點擊圖片相對應的視頻。一個實現可以在這裏看到：http://www.seanhayesmusic.com/2012/media/切換嵌入式YouTube視頻播放與圖像

我想實現這個到WordPress的網站，我真的只有HTML和CSS的技能。如果有人能幫我解決這個問題，我將非常感激！

2012-02-28 Alex

只看源頭。它只是HTML。他在iframe中獲得了YouTube視頻，並且在縮略圖周圍有一個標記爲target = attribute的標記，使鏈接更改iframe。

或者，您可以實際將視頻嵌入到頁面中，並在您點擊縮略圖時使用javascript（和jquery，如果您希望它更容易）更改嵌入代碼。這種方法可能會更好，更容易。

轉到每個視頻的YouTube網頁，點擊「共享」，然後「嵌入」並複製html。
雖然你在那裏，截圖。剪裁/調整大小以製作視頻縮略圖。
對於默認視頻（在單擊縮略圖之前播放/顯示的視頻），將完整嵌入代碼（從第1步開始）粘貼到您的頁面中。這增加了標籤：id="video_player"
對於其他視頻，把你的縮略圖你的網頁上正常顯示，再加入<a>標籤這樣的圖像周圍：<a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false">（當然除了你需要修復的網址，與一個在該視頻
嵌入代碼如果你不已經擁有了它，源的jQuery到您的網頁這意味着添加類似下面你<head>標籤：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

2012-02-28 23:20:12 JasonWoof

嘿，我試了這個她e，http://www.earthamplified.com/look，但它只是跳轉到頁面頂部，並將＃添加到頂部網址的末尾，而不是切換視頻？ – Alex 2012-03-01 09:53:46

糟糕，看起來像我搞砸onclick處理程序中的引號。你可能需要了解這裏發生了什麼，才能使其工作。我只是輸入了我的想法，但沒有對它進行測試。 – JasonWoof 2012-03-13 03:37:18

回答