Youtube Iframe API 仅适用于第一个

Question

我已经尝试了这里提供的一些解决方案，但没有成功。

Youtube 视频隐藏在里面 div。

点击按钮，视频出现，但是当我点击暂停按钮时，div 需要再次隐藏（强制和工作）

第二次，我点击播放视频按钮，视频出现，但自动播放和暂停都没有触发隐藏事件。

为什么？

JSFIDDLE：https://jsfiddle.net/u19ut5gt/6/

HTML

<div id="fw16-liam">
            <div class="fw16-button playvideo">Play Video</div>
            <div id="liam-video"><div id="ytplayer"></div></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Javascript

$("#fw16-liam .playvideo").click(function(){
                $("#liam-video").fadeIn(1000);
                runPlayer( '0m9hYRUV920' );
            });

            if(document.getElementById('iframe_api') === null){
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                tag.id = "iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            }

            function runPlayer( video_id ){
                var player;
                player = new YT.Player('ytplayer', {
                    playerVars: {
                        autoplay: 1,
                        html5: 1,
                        controls: 1,
                        showsearch: 0,
                        showinfo: 0,
                        loop: 1,
                        fs: 0
                    },
                    height: '300',
                    width: '487',
                    videoId: video_id,
                    events: {
                        onStateChange: function (event) {   
                            // Loop after video end
                            if(event.data === YT.PlayerState.ENDED){
                                event.target.playVideo();
                            }           

                            // If user, pause video, then this hide.
                            if(event.data == 2){
                                event.target.stopVideo();
                                $("#liam-video").fadeOut(200);
                            }
                        }
                    }
                });
            }

CSS

.playvideo{width:112px; height: 37px; color: white;}
.fw16-button {cursor: pointer;cursor: hand; background-color: red;}
#liam-video{display:none; background: #9e7969; width: 487px; height:677px; position: relative; left: 0px; top: 20px; border: none;}
#liam-video iframe{border:none;}

Answer 1

您应该只初始化 player 一次。下次需要重现视频时，调用playVideo即可。在你的 runPlayer 函数中，尝试这样的事情：

var player;
function runPlayer( video_id ){
  if(player) {
    player.playVideo();
    return player;
  }
  player = new YT.Player('ytplayer', {
    ...
  }
}

检查此 fiddle。

Youtube Iframe API 仅适用于第一个

Youtube Iframe API only works at the first

jquery

youtube-iframe-api