切换嵌入式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

回答