단비의 코딩 공부 blog

[Vanilla JS]study 20일차 - 유튜브 iframe 본문

javascript&jquery

[Vanilla JS]study 20일차 - 유튜브 iframe

황굽달 2023. 4. 4. 09:43

1. 유튜브영상 가지고 오기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>유튜브 API</title>
    </head>
    <body>
        <!-- iframe : 외부페이지를 현재 페이지로 끌어오는 태그 -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/d9IxdwEFk1c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>

2. 유튜브영상컨트롤

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>유튜브 API</title>
    </head>
    <body>
        <!-- iframe : 외부페이지를 현재 페이지로 끌어오는 태그 -->
        <!-- 
            * 유튜브 영상컨트롤 옵션
            1. 문법 : src속성의 주소 뒤에 작성
               url?옵션명=값$옵션명=값 (파라미터라고 부름)
            2. 옵션의 종류
                1) autoplay : 자동실행, 1 혹은 0으로 작성 (0이 no, 1이 yes) - 음소거와 같이 써야 가능
                2) mute : 음소거, 1 혹은 0으로 작성 (0이 no, 1이 yes)
                3) controls : 영상컨트롤바 유무, 1 혹은 0으로 작성 (0이 no, 1이 yes)
                4) loop : 반복재생, 1 혹은 0으로 작성 (0이 no, 1이 yes)
        -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/d9IxdwEFk1c?autoplay=1&mute=1&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>

 

 

3.유튜브 아이프레임

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>유튜브 API</title>
    </head>
    <body>
        <!-- 영상자체에 옵션 추가 : version=3&enablejsapi=1 -->
        <iframe width="560" height="315" id="youtube_video" src="https://www.youtube.com/embed/d9IxdwEFk1c?version=3&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <hr>
        <button id="play">재생</button>
        <button id="stop">멈춤</button>
        <button id="paused">일시정지</button>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script>
            //1. 문서객체 선택
            const playBtn = document.getElementById('play');
            const stopBtn = document.getElementById('stop');
            const pausedBtn = document.getElementById('paused');
            
            let player;
            //유튜브 iframe을 시작할 것을 호출
            window.onYouTubeIframeAPIReady = function(){
                //생성자함수 매개변수에 iframe id값을 작성
                player = new YT.Player('youtube_video', {});
            }

            //재생버튼 클릭이벤트
            playBtn.addEventListener('click', function(){
                player.playVideo(); //유튜브가 api로 만든 재생 메서드
            
            });

            //멈춤버튼 클릭이벤트
            stopBtn.addEventListener('click', function(){
                player.stopVideo(); //유튜브가 api로 만든 멈춤 메서드
            });

            //멈춤버튼 클릭이벤트
            pausedBtn.addEventListener('click', function(){
                player.pauseVideo(); //유튜브가 api로 만든 멈춤 메서드
            });
        </script>
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 22일차 - 에러  (1) 2023.04.17
[Vanilla JS]study 21일차 - Cookie  (0) 2023.04.14
[Vanilla JS]study 19일차 - API 우편번호 검색  (0) 2023.03.29
[Vanilla JS]study 18일차 - 웹 컨텐츠 제작 - 갤러리  (0) 2023.03.28
[Vanilla JS]study 17일차 - 웹 컨텐츠 제작 - 탭바  (0) 2023.03.27
'javascript&jquery' Related Articles more