pbj0812의 코딩 일기

[JavaScript] Youtube Player API를 사용한 홈페이지 내 youtube 동영상 삽입 본문

ComputerLanguage_Program/JavaScript

[JavaScript] Youtube Player API를 사용한 홈페이지 내 youtube 동영상 삽입

pbj0812 2020. 7. 20. 01:27

0. 목표

 - 내 홈페이지에 iframe 형태로 youtube 동영상 삽입

1. 실습

 1) 준비물

  - 영상 구하기

 2) 코드 작성

  - iframe 테스트는 기본적인 iframe을 사용했을 경우를 보기 위한 것

  - iframe player api 이후가 실제 필요한 값

  - 중간의 videoId 부분에 위 영상의 videoId(youtube.com/watch?v= 이후 뒷 부분)를 입력

  - api 참고 문서는 하단의 참고 부분 확인

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>회원가입을 다시 한번 축하합니다!!</h1>
        <h1>iframe 테스트</h1>
        <iframe src="https://www.youtube.com/watch?v=X16hJHj1ifE" height="200" width="300"></iframe>
        <h1>iframe player api</h1>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>

        <script>
            // 2. This code loads the IFrame Player API code asynchronously.
            var tag = document.createElement('script');

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

            // 3. This function creates an <iframe> (and YouTube player)
            //    after the API code downloads.
            var player;
            function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'X16hJHj1ifE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                    }
                });
            }

          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
              event.target.playVideo();
          }

          // 5. The API calls this function when the player's state changes.
          //    The function indicates that when playing a video (state=1),
          //    the player should play for six seconds and then stop.
          var done = false;
          function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING && !done) {
                  setTimeout(stopVideo, 6000);
                  done = true;
              }
          }
          function stopVideo() {
              player.stopVideo();
          }
    </script>
    </body>
</html>

2. 결과

  - 일반적인 iframe을 사용할 경우 에러 발생

  - Youtube Player API를 사용할 경우에는 정상 작동 확인

3. 참고

 - iframe 삽입에 대한 Youtube Player API 참조 문서

저작자표시 비영리 동일조건

'ComputerLanguage_Program > JavaScript' 카테고리의 다른 글

[JavaScript] React 환경설정 및 테스트  (0) 2020.07.26
[JavaScript] url 변경하기(눈에만...)  (0) 2020.07.19
[JavaScript] 탭 제목 변경을 통한 시계 만들기  (0) 2020.06.22
[JavaScript] 조건문, 반복문 예제  (0) 2020.01.29
'ComputerLanguage_Program/JavaScript' Related Articles more
Comments