유튜브 iframe playlist - yutyubeu iframe playlist

The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id

YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)

Example

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Try it Yourself »

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL. However, automatically starting a video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

Try it Yourself »

YouTube Playlist

A comma separated list of videos to play (in addition to the original URL).

YouTube Loop

Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Try it Yourself »

YouTube Controls

Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

Try it Yourself »

네트워크 속도가 빨라지면서, 웹사이트에 동영상을 넣는 경우가 많아졌는데요!

video 태그로 동영상을 삽입하면, 트랙픽이 많이 나가는 단점이 있습니다 😥

그래서 이에 대한 방안으로, 유튜브 iframe 을 삽입하는 방법이 있죠

그래서 오늘은 유튜브 iframe 에 대해, 반응형으로 태그를 넣는법에 대해 정리해보겠습니다!

유튜브 iframe

유튜브 영상을 html태그로 가져와, 웹페이지에 삽입하는 방법입니다.

1. Mark Up

1 ) 가져오고 싶은 유튜브 영상으로 가서 [공유] 버튼을 클릭합니다.

2) 공유버튼 누르면 나오는 창에서 [퍼가기] 클릭

3 ) 퍼가기 누르면 나오는 창 오른쪽에 태그 내용이 있습니다! 하단의 [복사] 클릭 후 그대로 html에 붙여 넣으면 됩니다 

* html *

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio" frameborder="0" allowfullscreen></iframe>
</div>

2. 속성

하지만 저희는 자동재생이나, 음소거, 반복재생 등을 하고 싶습니다.

이는 마크업 태그 안에 매개변수를 넣어 제어를 할 수 있습니다. 😉

* iframe 태그를 보면,   src="https://www.youtube.com/embed/3wRQW-W9Dio"  이런 형태로 되어 있는걸 볼 수 있습니다.

여기서  3wRQW-W9Dio  에 해당하는 부분이 유튜브 영상의 ID값인데요, 속성 값은 이 뒤로 붙여주면 됩니다.

1 ) 자동 재생 autoplay

추가 태그 : ?autoplay=1

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

2 ) 음소거 mute

영상 정책상, 음소거 일 경우에만 자동재생이 되기 때문에 autoplay가 제대로 작동하려면 mute 를 꼭 넣어주어야 합니다.

추가 태그 :&mute=1

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>

3 ) 시작 시간 지정 start

추가 태그 : &start=110  (=1분50초부터 시작)

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110" frameborder="0" allowfullscreen></iframe>
</div>

4 ) 종료 시간 지정 end

추가 태그 : &end=120 (=2분에 종료)

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120" frameborder="0" allowfullscreen></iframe>
</div>

5 ) 하단 컨트롤러 숨기기

추가 태그 : &controls=0  * 하단의 컨트롤러만 사라질뿐, 유튜브 로고, 동영상 정보는 보이며 클릭시 영상제어가 가능합니다.

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0" frameborder="0" allowfullscreen></iframe>
</div>

6 ) 영상 여러개 재생

src 에 있는 영상 다음으로 가져오고 싶은 영상의 ID값을 가져옵니다 -- 0OvdMVDIvDE0

추가 태그 : &playlist=0OvdMVDIvDE0   

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&playlist=0OvdMVDIvDE0" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&playlist=0OvdMVDIvDE0" frameborder="0" allowfullscreen></iframe>
</div>

7 ) 반복재생 loop + playlist

반복재생 속성값은 loop=1 이지만, playlist도 함께 넣어줘야 동작이 됩니다.

* 한가지 동영상을 반복재생 ) 추가 태그 : &loop=1&playlist=3wRQW-W9Dio  -- 해당 동영상의 id값을 playlist에 또 넣어줍니다.   

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=3wRQW-W9Dio" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=3wRQW-W9Dio" frameborder="0" allowfullscreen></iframe>
</div>

* 여러가지 동영상을 반복재생 ) 추가 태그 : &loop=1&playlist=0OvdMVDIvDE0 -- 추가할 동영상의 id값을 playlist에 넣어줍니다.   

 src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=0OvdMVDIvDE0" 

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=0OvdMVDIvDE0" frameborder="0" allowfullscreen></iframe>
</div>

8 ) 동영상 인라인으로 재생  playsinline  --  iOS 동영상 풀스크린으로 재생 되는 문제 해결 방안

iOS 환경에서, 동영상을 재생하면 전체화면으로 재생되는 이슈가 있습니다. 이를 해결하기 위해 해당 태그를 넣어 영상이 인라인으로만 재생되도록 해줍니다.

추가 태그 : &playsinline=1

<div class="video_w">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=3wRQW-W9Dio&playsinline=1" frameborder="0" allowfullscreen></iframe>
</div>

3. 반응형 

반응형 페이지에서, width이 줄어들더라도 영상이 그 비율을 유지하며 사이즈가 줄어드는 방법입니다! 

* html*

<div class="video_w">
	<iframe width="100%" height="100%" src="https://www.youtube.com/embed/3wRQW-W9Dio?autoplay=1&mute=1&start=110&end=120&controls=0&loop=1&playlist=3wRQW-W9Dio&playsinline=1" frameborder="0" allowfullscreen></iframe>
</div>

* css *

.video_w{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

>> 결과물

See the Pen 유튜브 반응형 by GYURI (@gyuri-v) on CodePen.

이렇게 유튜브 iframe에 대한 설명을 마무리 해봅니다! 

요즘 영상이 들어간 사이트를 요구하는 클라이언트가 많아,

영상관련해서는 저도 잘 알아두려고 해요! 유튜브 api라는 것도 있다던데,

저는 아직 잘 몰라서 😂나중에 공부해서 올려보도록 하겠습니다! ㅎㅎ 

오늘도 함께해주셔서 감사합니다 - ! 🍊