iframe으로 가져온 youtube 비디오 멈추기(재생, 일시정지)

youtube 소스 코드 복사를 통해서 iframe 코드를 가져옵니다.

아래는 복사한 코드의 예시입니다.

                <iframe

                  width="1264"

                  height="711"

                  src="https://www.youtube.com/embed/WVZTsTXO3Nk"

                  title="Marvel’s Midnight Suns | “Darkness Falls” Trailer"

                  frameborder="0"

                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

                  allowfullscreen

                ></iframe>

src의 끝부분에 [?enablejsapi=1&version=3&playerapiid=ytplayer] 를 붙여넣습니다.

src="https://www.youtube.com/embed/WVZTsTXO3Nk?enablejsapi=1&version=3&playerapiid=ytplayer"

 

이벤트를 정해주기 위해서는 아래의 빨간 글씨 부분에 stopVideo, playVideo, pauseVideo 중 필요한 기능을 골라 넣으면 됩니다.

$("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

 

 

 

아래는 사용 예시입니다.

4개의 유튜브 영상을 추가했습니다.

각각의 src에 ?enablejsapi=1&version=3&playerapiid=ytplayer 를 빠짐없이 붙여넣습니다.

 

영상 주소를 붙여넣은 순서대로 각각 $("iframe")[i] 에서 [] 안의 숫자에 해당하는 index를 가집니다.

$("iframe")[0] src="https://www.youtube.com/embed/3gJgj2ngCyA?enablejsapi=1&version=3&playerapiid=ytplayer"

$("iframe")[1] src="https://www.youtube.com/embed/Zh2K7SxRHmo?enablejsapi=1&version=3&playerapiid=ytplayer"

$("iframe")[2] src="https://www.youtube.com/embed/WVZTsTXO3Nk?enablejsapi=1&version=3&playerapiid=ytplayer"

$("iframe")[3] src="https://www.youtube.com/embed/NYzxYzM3Rj8?enablejsapi=1&version=3&playerapiid=ytplayer"

 

필요에 따라서 index를 이용해 영상별로 제어가 가능하지만 제 경우에는 별도로 다룰 영상은 없습니다.
따라서, for문을 이용해 모든 index에 .infoWrap 클래스가 존재하지 않는다면 stopVideo 를 하도록 설정했습니다.

  $(".description .closeBtn").on("click", function () {

    $(".infoWrap").removeClass("on");

    $(".description .info").removeClass("on");

    if (!$(".infoWrap").hasClass("on")) {

      for (i = 0; i < 4; i++) {

        $("iframe")[i].contentWindow.postMessage('{"event":"command","func":"' + "stopVideo" + '","args":""}', "*");

      }

    }

  });

 

[이를 적용한 사이트입니다. 메인화면의 타이틀을 클릭하면 영상이 나타납니다.]

검은 배경이 .infoWrap클래스입니다. 배경이 있는 동안에는 영상이 재생되지만 ,

배경을 벗어나 .infoWrap클래스가 사라지면 재생을 멈춥니다.

 

자료출처 https://hplayground.tistory.com/88

iframe youtube 재생, 일시정지, 중지 제어