유튜브 영상 임베드 팁들

1
<iframe width="560" height="315" src="https://www.youtube.com/embed/rRzxEiBLQCA?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
cs

가장 단순히 유튜브 영상을 불러오는 방식입니다.

공유 > 퍼가기 > 소스코드 복사라는 간단한 방식으로 가능합니다만, 아무래도 깔끔함은 조금 떨어집니다.

짤막한 팁들 몇 가지로 조금 더 깔끔하게 유튜브 영상을 불러오는 방법을 소개해볼까 합니다.

라이브 데모

영상을 클릭하면 음소거/해제 가 반복됩니다.

youtube.html

시작하기 전

1
<script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl1aVfNF/www-widgetapi.js" async></script>
cs

후술할 내용은 위 스크립트가 있어야 제대로 작동합니다.

임베드한 영상을 강제로 화면에 맞추기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.videoWrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

@media (min-aspect-ratio: 16/9) {
    .videoWrapper {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .videoWrapper {
        width: 300%;
        left: -100%;
    }
}
Colored by Color Scripter
cs

비디오를 감싼 요소에 위와 같은 css를 추가하면 됩니다.

영상 자동 재생 (및 기타 설정)

HTML

1
<div id="player"></div>
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var tag = document.createElement('script');
tag.src = 'http://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var p;
 
function onYouTubePlayerAPIReady() {
  p = new YT.Player('player', {
    height: '100%',
    width: '100%',
    playerVars: {
      rel: 0,
      playsinline: 1,
      vq: 'hd1080',
      autoplay: 1,
      loop: 1,
      playlist: 'rRzxEiBLQCA',
      controls: 0,
      autohide: 1,
      showinfo: 0,
      wmode: 'opaque'
    },
    videoId: 'rRzxEiBLQCA',
    events: {
      onReady: onPlayerReady
    }
  })
}
 
function onPlayerReady(a) {
  a.target.playVideo(), a.target.mute()
}
 
function toggleSound() {
  p.isMuted() ? p.unMute() : p.mute()
}
Colored by Color Scripter
cs

영상을 음소거된 상태로 자동재생하며, 반복해서 재생됩니다.

본인이 원하는 영상으로 videoId와 playlist를 수정해주세요.

유튜브 영상 링크 뒤에 있는 알파벳 조합이 비디오의 id입니다.

ex) https://www.youtube.com/watch?v=rRzxEiBLQCA 에서 rRzxEiBLQCA

음소거 해제 토글 버튼

HTML

1
<div onclick="toggleSound()"></div>
cs

1
2
3
function toggleSound() {
  p.isMuted() ? p.unMute() : p.mute()
}
Colored by Color Scripter
cs

간단해서 딱히 설명할 것도 없네요;;

완성된 html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl1aVfNF/www-widgetapi.js" async></script>
    <style>
        html, body {
            padding: 0;
            margin: 0
        }

        .videoWrapper {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        @media (min-aspect-ratio: 16/9) {
            .videoWrapper {
                height: 300%;
                top: -100%;
            }
        }

        @media (max-aspect-ratio: 16/9) {
            .videoWrapper {
                width: 300%;
                left: -100%;
            }
        }

        .videoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

    </style>
</head>
 
<body>
    <div class="videoWrapper" onclick="toggleSound()">
        <div id="player"></div>
    </div>
    <script>
        var tag = document.createElement('script');
        tag.src = 'http://www.youtube.com/player_api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var p;
 
        function onYouTubePlayerAPIReady() {
            p = new YT.Player('player', {
                height: '100%',
                width: '100%',
                playerVars: {
                    rel: 0,
                    playsinline: 1,
                    vq: 'hd1080',
                    autoplay: 1,
                    loop: 1,
                    playlist: 'rRzxEiBLQCA',
                    controls: 0,
                    autohide: 1,
                    showinfo: 0,
                    wmode: 'opaque'
                },
                videoId: 'rRzxEiBLQCA',
                events: {
                    onReady: onPlayerReady
                }
            })
        }
 
        function onPlayerReady(a) {
            a.target.playVideo(), a.target.mute()
        }
 
        function toggleSound() {
            p.isMuted() ? p.unMute() : p.mute()
        }
    </script>
</body>
 
</html>
Colored by Color Scripter
cs

시작하기 전

임베드한 영상을 강제로 화면에 맞추기

영상 자동 재생 (및 기타 설정)

음소거 해제 토글 버튼

완성된 html

티스토리툴바