AaronMix

有时您想嵌入多个 AdSense YouTube 视频同一页，例如前十名列表。它也可以在网站评论或者论坛部分的嵌入播放器中自动让链接指向 YouTube。但 YouTube 播放器默认运行有个问题（除非某人知道技巧并和我们一起分享）：一点击播放，视频就一直缓冲；意味着如果含有10个视频的页面，您点击第一个视频，但是然后决定宁可去看第二个视频。即使当您已经停止第一个视频，第二视频也会导入得很慢（对于后来点击的视频来说，也会越来越慢）。您能做的就是重新载入完整的 HTML 页面，但那也不是很有效。

一种解决方法是使用一些程序或者博客插件，建立一个特殊扩展的“+ 显示该视频”链接，类似于我们博客论坛那样。因此你不会马上看见 YouTube 播放器。但你需要点击后才展开第一个。你可以做的是先添加个空白“div”层元素，使用 JavaScript。当展开 div 时，用嵌入代码填充它（你可以设定视频自动播放，以让用户不需要在展开后再一次点击）。一展开，视频就开始缓冲。但是现在旧链接的地方会显示可选的链接，例如“- 隐藏该视频”。在隐藏上方，你可以再次“删除” div 元素的内容。

这里有操作摘录。首先是“显示视频”链接的 HTML 代码： <p class=”expander” id=”expander1″><a href=”javascript:showForumVideo(1, ‘7gntV6AePOM’)”>+ Show video</a></p>

第一个参数（值为“1”）表示整页有多少视频。第二个参数为 YouTube 视频代号(”7gntV6AePOM”)。您可以写个像这个空元素那样的，如下：

<p class=”expandee” id=”expandee1″> </p>

您在 CSS 中设置 “expandee” 类为 “display: none”。现在 JS 文件中，写入如下的代码（注意：expand / collapse 函数也对于其他有用，因此分开列出他们）：

function showForumVideo(n, videoId)   

{   

    expand(n);   

    var elm = document.getElementById("expandee" + n);   

    if (elm) {   

        elm.innerHTML = "<a href="javascript:hideForumVideo(" mce_href="javascript:hideForumVideo(" + n + ", '" + videoId + "')">- Hide video</a><br />" +   

                "<object style="width: 500px; height: 412px"><param name="movie" " +   

                "value="http://www.youtube.com/v/" + videoId + "&autoplay=1"></param>" +   

                "<embed src="http://www.youtube.com/v/" mce_src="http://www.youtube.com/v/" + videoId + "&autoplay=1" type="application/x-shockwave-flash" " +   

                "style="width: 500px; height: 412px"></object>" +   

                "<br /><a href="http://youtube.com/watch?v=" mce_href="http://youtube.com/watch?v=" + videoId + "" style="color: #888; font-size: 85%">" +   

                "youtube.com/watch?v=" + videoId + "</a>";   

    }   

}function hideForumVideo(n, videoId)   

{   

    var elm = document.getElementById("expandee" + n);   

    if (elm) {   

        elm.innerHTML = " ";   

    }   

    collapse(n);   

}   

function expand(n)   

{   

    showElm("expandee" + n);   

    hideElm("expander" + n);   

}   

function collapse(n)   

{   

    showElm("expander" + n);   

    hideElm("expandee" + n);   

}   

function showElm(name)   

{   

  var elm = document.getElementById(name);   

  if (elm) { elm.style.display = "block"; }   

}   

function hideElm(name)   

{   

  var elm = document.getElementById(name);   

  if (elm) { elm.style.display = "none"; }   

}

不同浏览器中，测试有效。或许有更好调整它的方法，但是这会让您马上开始。

[来自 Spreeblick 和 Ionut 的技巧！]

原文：Multiple YouTube Videos on a Page