특정 클래스가 변경될 때 유튜브 플레이어를 정지시키는 자바스크립트

이슈, 적용점

Bricks Builder가 최근 업데이트 되기 전까지는 팝업이 닫힐 때 유튜브 플레이어가 살아있는 문제가 발생하는 것이 발견되어 어떻게 하면 플레이어를 멈출 수 있을까 찾아보던 중 발견한 코드를 공유한다.

 

자바스크립트는 테마 또는 빌더의 자바스크립트를 넣는 곳에 정확하게 위치시켜야 동작하기 때문에 각자 상황에 맞는 파일 또는 코드 붙여넣기 형식을 찾아보고 적용하면 될 것 같다.

 

자바스크립트에 대해 전혀 기본 지식이 없다면 본인의 환경, 예를 들어 테마 + 자바스크립트 적용하기나 빌더 + 자바스크립트 적용하기 등의 검색어를 넣어 넣는 방법을 확인하고 넣는 것을 추천한다. 엉뚱하게 html에 코드 선언도 없이 넣는 것 만큼 안타까운 일은 없기 때문이다.

// brx-popup 클래스에 hide 클래스가 추가될 때 실행될 함수
function stopYoutubeVideo() {
  // 모든 iframe 태그를 선택합니다.
  const iframes = document.querySelectorAll("iframe");
  // 각 iframe을 순회하며
  iframes.forEach((iframe) => {
    // iframe이 유튜브 영상일 경우
    if (iframe.src.includes("youtube")) {
      // iframe의 src 값을 변경하여 영상을 정지시킵니다.
      iframe.src = iframe.src;
    }
  });
}

// brx-popup 클래스를 모니터링합니다.
const targetNode = document.querySelector(".brx-popup");
const config = { attributes: true };
const observer = new MutationObserver(function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "attributes" && mutation.attributeName === "class") {
      if (mutation.target.classList.contains("hide")) {
        stopYoutubeVideo();
      }
    }
  }
});
observer.observe(targetNode, config);

 

자바스크립트 코드해석

brx-popup이라는 클래스를 가진 객체에 hide 클래스가 추가될 때 모든 재생되던 유튜브 플레이어는 멈추게 된다.

감시대상인. brx-popup을 본인이 원하는 클래스로 변경하고 특정 상황에 추가될 클래스를 .hide 클래스와 교체해 주면 된다.

 

플레이 하고 있던 것 뿐만 아니라 열고있는 화면상의 모든 유튜브 플레이어가 정지하기 때문에 이것이 본인에게 적합한 코드인지 확인하자.

 

주석이 제거된 깔끔한 코드를 원한다면 아래 코드를 긁어가면 된다

function stopYoutubeVideo() {
  const iframes = document.querySelectorAll("iframe");
  iframes.forEach((iframe) => {
    if (iframe.src.includes("youtube")) {
      iframe.src = iframe.src;
    }
  });
}

const targetNode = document.querySelector(".brx-popup");
const config = { attributes: true };
const observer = new MutationObserver(function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "attributes" && mutation.attributeName === "class") {
      if (mutation.target.classList.contains("hide")) {
        stopYoutubeVideo();
      }
    }
  }
});
observer.observe(targetNode, config);

 

결론

워드프레스 또는 기타 홈페이지에서 한 페이지에서 여러 레이어를 통해 유튜브 재생이 필요한 경우 다양한 방법으로 제어할 수 있는 코드이므로 미디어를 활용한 홈페이지에서는 다양한 시도를 위한 자바스크립트 코드를 사용하면 유용할 것 같다.

 

코로나로 인해 미디어 홈페이지들의 제작 수요가 늘어가고 있고 페이지에서 활용하는 방법이 워낙 다양하다보니 이런 기술들을 따라가기에는 웹쪽은 워낙 변화가 빨라 적응하기 힘든 부분이 있는 것 같다.

 

하지만 검색하고 응용하면 안나오는 것이 없는게 웹인 만큼 고생도 덜 하는 부분이 있기에 화이팅!