Youtube脚本API - 显示在菜单项顶部的播放器

时间:2013-02-25 11:28:10

标签: youtube-api

我正在尝试将我的YouTube视频嵌入到我的网站上,我正在使用脚本API,因此我可以将其自动播放并自动显示。

我遇到的唯一问题是视频位于我的导航菜单下方,当子菜单退出时,它会显示在播放器下方。

我最初使用iFrame脚本嵌入了播放器,并使用wmode = opaque来阻止这个问题完美无缺。

它似乎不适用于脚本API嵌入方法。

是否可以使用iFrame方法阻止这种情况发生或静音?

继承我的YouTube剧本:

<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.1");
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.playVideo();
    ytplayer.mute();
}
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/Du_GXK-lh4M?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&rel=0&wmode=opaque",
"ytapiplayer", "440", "280", "8", null, null, params, atts);
</script>

可以在我的网站上看到视频嵌入:http://create.tuscorlloyds.com/

希望我把它发布在正确的地方。

任何帮助都会很棒!

非常感谢 Nick @ Tuscor Lloyds

1 个答案:

答案 0 :(得分:1)

我通过在'allowScriptAccess:'后面添加'wmode:“transparent”'来修复此问题。总是“'文本。

完成的代码:

<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.1");
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.mute();
}
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/Du_GXK-lh4M?enablejsapi=1&    playerapiid=ytplayer&allowFullScreen=true&version=3&rel=0",
"ytapiplayer", "440", "280", "8", null, null, params, atts);
</script>