Youtube 嵌入 chrome 的问题答案

【问题标题】：Youtube embed trouble with chromeYoutube 嵌入 chrome 的问题
【发布时间】：2012-05-21 22:00:29
【问题描述】：

我正在使用此代码

<div onclick="thevid=document.getElementById('thevideo'); 
              thevid.style.display='block'; 
              this.style.display='none'">
    <img src="../img/film.jpg" style="cursor:pointer" />
</div>
<div id="thevideo" style="display:none">
    <iframe width="600" 
            height="335" 
            src="https://www.youtube.com/embed/MZ-NmMMTyTU?&rel=0&theme=light&showinfo=0&disablekb=1&hd=1&autohide=1&color=white&autoplay=1"
            frameborder="0"
            allowfullscreen>
    </iframe></div>
</div>

在我的网站上嵌入 YouTube 视频，它在 Firefox 中运行良好。但在 Chrome 中，视频开始播放，在我放在顶部的图像后面。

任何想法如何解决这个问题？

【问题讨论】：

由于某种原因缺少代码

youtube.com/embed/…" frameborder="0" allowfullscreen>

看起来你在里面多了一个</div>。这是在此处发布时出现的复制/粘贴错误，还是在您的实际源代码中？

标签： html youtube

【解决方案1】：

我刚刚使用 Javascript API 制作了一个 YouTube 处理程序。

HTML 代码：

<b id="youbox" class="youbox youbox-left">
    <div id="player"></div> <!--player will loads here-->
</b>
<div id="youtube-select" class="youtube-select clearfix">
    <ul>
        <!-- use this part as a dynamic block, so you can multiply this -->
        <li class="playanothervideo {ACTIVE}" rel="{YOUTUBE VIDEO ID}">
            <h1>{TITLE OF VIDEO}</h1>
        </li>
        <!-- end of dynamic block. important: at the dom ready you have to make one li active, because that will be the first loaded video -->
    </ul>
</div>

JavaScript

if (($("#youbox").size() > 0)) // if you have youbox, which means you want a youtube player
{
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player; // insert youtube player api to the html source, and make a player instance

    function onYouTubePlayerAPIReady() // on youtube player api loaded
    {
        player = new YT.Player('player', {
        height: '350', // height of player
        playerVars: { 'color': 'white', 'theme': 'light', 'modestbranding': 1, 'rel':0, 'showsearch':0, 'showinfo': 0, 'iv_load_policy': 3, 'hd': 1, 'controls':1}, // personalize players lookout (this is white instead of red)
        width: '629', // width of player
        videoId: $("#youtube-select li.active").attr("rel"), // aye, this is the first video id's getter
        events:
            {
                'onReady': onPlayerReady, // the easiest event handling, calls onplayerready fn
            }
        });
    }

    function playAnotherVideo(id) // play another video event handler
    {
        if (player.getPlayerState() == 1) // if video is playing
        {
        console.log("playerstate ok")
            player.stopVideo();       // stops video
            player.loadVideoById(id); // load other
            player.playVideo();       // starts other
        }
        else
        {
            player.cueVideoById(id);   // if not playing just loads the other video's thumbnail
        }
    }

    function onPlayerReady(event) 
    {
        event.target.setPlaybackQuality("hd720"); // setting 720p resolution by default (it's not tested yet, sorry)
    }
}

并来自其他js，但可以应用到第一个：

$(".playanothervideo").live("click", function(){
    playAnotherVideo($(this).attr("rel"));
    pickMe($(this), "active");
});
function pickMe(e, c) {
    e.siblings(e[0].tagName).removeClass(c);
    e.addClass(c);
}

选择视频并处理它们的活动类。

祝 Youtubein 好运。 :)

更多信息请查看：https://developers.google.com/youtube/js_api_reference

【讨论】：