스크롤 이벤트중 iframe youtube 제어

2022. 9. 22. 11:00

스크롤 이벤트 중 iframe youtube 제어

오늘은 회사에서

스크롤 이벤트 중 iframe youtube 제어를

하는 일이 생겨서 이렇게 기록해 둔다.

iframe youtube api가 예전과 다르게

바뀌어서 찾아서 쓰기 쉽게 커스텀해놓는 것이다.

1. 만드는 부분 이미지

위에 이미지가 사이트 들어가자마자 나오는 메인 상단 부분이고

두 번째 섹션이고 거기에 iframe youtube가 있다

스크롤 내리다가

iframe youtube가 있는 콘텐츠 부분에 오면 youtube가 재생되고

다시 콘텐츠 부분이 브라우저에서 시야에서 안 보이면 멈춤이 되는 걸 보실 수 있습니다.

아래에 코드를 순서대로 써보았습니다.

1. HTML

<span class="image-block youtube" >
    <iframe id="player" width="100%" src="https://www.youtube.com/embed/eswSE4LsNHY?&amp;loop=1&mute=1&playlist=eswSE4LsNHY&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay " ;"="" =""="" encrypted-media;="" gyroscope;="" picture-in-picture"="" allowfullscreen=""></iframe>
</span>

2. JS 유튜브 제어

  //1. 유튜브 iframe api를 head 임포트시킨다.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  //2. 유튜브용 변수 선언
  var youtubePlayer;

  // onYouTubeIframeAPIReady함수는 플레이어 API 코드가 다운로드되는 즉시 실행됩니다
  function onYouTubeIframeAPIReady() {
      youtubePlayer = new YT.Player('player', {
          playerVars:{
              rel:0 //관련영상 표시하지 않기.
          },
      });
  }

  function playVideo() {
      youtubePlayer.playVideo();//재생
  }

  function pauseVideo() {
      youtubePlayer.pauseVideo();// 일시정지
  }

3. JS 스크롤 이벤트

  // 2. 스크롤 이벤트
  var isVisible = false;

  $(window).on('scroll',function() {
    
    if (checkVisible($('.youtube'))&&!isVisible) {
        console.log("Visible!!!");
        isVisible=true;
        playVideo();
    } else if(!checkVisible($('.youtube'))&&isVisible) {
        console.log("hidden!!!");
        isVisible=false;
        pauseVideo();
    }

  });

  //체크할 element(ex:div span.. 등등)들이 브라우저에 나타날때를 체크하는 함수
  function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
  }

위에. youtube 대신에 여러분들이

스크롤 도중에 찾을 클래스를 넣어주면 된다.

4. 완성본


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스크롤 유튜브 재생 스탑</title>
</head>
<body>

    <div style="background:red;height:1000px;"></div>
    <span class="image-block youtube" >
        <iframe id="player" width="100%" src="https://www.youtube.com/embed/eswSE4LsNHY?&amp;loop=1&mute=1&playlist=eswSE4LsNHY&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay " ;"="" =""="" encrypted-media;="" gyroscope;="" picture-in-picture"="" allowfullscreen=""></iframe>
    </span>
    <div style="background:rgb(27, 168, 171);height:1000px;"></div>


    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script>
        //1. 유튜브 iframe api를 head 임포트시킨다.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        //2. 유튜브용 변수 선언
        var youtubePlayer;

        // onYouTubeIframeAPIReady함수는 플레이어 API 코드가 다운로드되는 즉시 실행됩니다
        function onYouTubeIframeAPIReady() {
            youtubePlayer = new YT.Player('player', {
                playerVars:{
                    rel:0 //관련영상 표시하지 않기.
                },
            });
        }

        function playVideo() {
            youtubePlayer.playVideo();//재생
        }

        function pauseVideo() {
            youtubePlayer.pauseVideo();// 일시정지
        }

        // 2. 스크롤 이벤트
        var isVisible = false;
        
        $(window).on('scroll',function() {
        
        if (checkVisible($('.youtube'))&&!isVisible) {
            console.log("Visible!!!");
            isVisible=true;
            playVideo();
        } else if(!checkVisible($('.youtube'))&&isVisible) {
            console.log("hidden!!!");
            isVisible=false;
            pauseVideo();
        }

        });

        //체크할 element(ex:div span.. 등등)들이 브라우저에 나타날때를 체크하는 함수
        function checkVisible( elm, eval ) {
        eval = eval || "object visible";
        var viewportHeight = $(window).height(), // Viewport Height
            scrolltop = $(window).scrollTop(), // Scroll Top
            y = $(elm).offset().top,
            elementHeight = $(elm).height();

        if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
        if (eval == "above") return ((y < (viewportHeight + scrolltop)));
        }

    </script>
</body>
</html>

저작자표시 비영리 변경금지

'웹 개발 > 템플릿' 카테고리의 다른 글

div table custom (10)	2022.08.04
jquery 슬라이드 toggle 메뉴1 (7)	2022.08.03

퍼블리셔 이과장