Youtube Iframe API는 처음에만 작동합니다.

Question

여기서는 제시된 솔루션 중 일부를 사용해 보았습니다.

Youtube 비디오는 숨겨진 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> 

자바 스크립트

$("#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으로 전화하십시오.

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

체크 아웃이 fiddle : 당신의 runPlayer 함수에서 이런 일을하려고합니다.