본문 바로가기

[R]HTML YouTube 동영상(HTML YouTube Videos)

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

HTML로 동영상을 재생하는 가장 쉬운 방법은 YouTube를 사용하는 것입니다.




Struggling with Video Formats?

비디오 포맷으로 고생하고 있습니까?


Earlier in this tutorial, you have seen that you might have to convert your videos to different formats to make them play in all browsers.

이 자습서의 앞부분에서 모든 브라우저에서 비디오를 재생할 수 있도록 비디오를 다른 형식으로 변환해야 할 수도 있음을 알았습니다.

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가 귀하의 웹 페이지에서 동영상을 재생하도록하는 것입니다.




YouTube Video Id

YouTube 동영상 ID


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

YouTube는 동영상을 저장 (또는 재생) 할 때 ID (예 : tgbNymZ7vqY)를 표시합니다.

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

이 ID를 사용하고 HTML 코드에서 동영상을 참조 할 수 있습니다.




Playing a YouTube Video in HTML

HTML로 YouTube 동영상 재생하기


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

웹 페이지에서 비디오를 재생하려면 다음을 수행하십시오.

Upload the video to YouTube

YouTube에 비디오 업로드

Take a note of the video id

동영상 ID를 기록해 둡니다.

Define an <iframe> element in your web page

웹 페이지에 <iframe> 요소 정의

Let the src attribute point to the video URL

src 속성이 비디오 URL을 가리 키도록합니다.

Use the width and height attributes to specify the dimension of the player

width 및 height 속성을 사용하여 플레이어의 크기를 지정합니다.

Add any other parameters to the URL (see below)

다른 매개 변수를 URL에 추가하십시오 (아래 참조).


Example - Using iFrame (recommended)

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





YouTube Autoplay

YouTube 자동 재생


You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL.

사용자가 YouTube URL에 간단한 매개 변수를 추가하여 해당 페이지를 방문하면 동영상이 자동으로 재생되기 시작하게 할 수 있습니다.


Note: Take careful consideration when deciding to autoplay your videos. 

참고 : 동영상 자동 재생을 선택할 때 신중하게 고려해야합니다. 

Automatically starting a video can annoy your visitor and end up causing more harm than good.

자동으로 동영상을 시작하면 방문자를 괴롭 히고 결국 유익한 것보다 더 해를 끼칠 수 있습니다.


Value 0 (default): The video will not play automatically when the player loads.

값 0 (기본값) : 플레이어가로드 될 때 비디오가 자동으로 재생되지 않습니다.

Value 1: The video will play automatically when the player loads.

값 1 : 플레이어가로드되면 비디오가 자동으로 재생됩니다.


YouTube - Autoplay

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

 




YouTube Playlist

YouTube 재생 목록


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

재생할 동영상의 쉼표로 구분 된 목록 (원본 URL과 함께).




YouTube Loop

YouTube 루프


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

값 0 (기본값) : 동영상이 한 번만 재생됩니다.

Value 1: The video will loop (forever).

값 1 : 동영상이 반복됩니다 (영원히).


YouTube - Loop

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





YouTube Controls

YouTube 컨트롤



Value 0: Player controls does not display.

값 0 : 플레이어 컨트롤이 표시되지 않습니다.

Value 1 (default): Player controls display.

값 1 (기본값) : 플레이어 컨트롤이 표시됩니다.


YouTube - Controls

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





YouTube - Using <object> or <embed>

YouTube - <object> 또는 <embed> 사용


Note: YouTube <object> and <embed> were deprecated from January 2015. You should migrate your videos to use <iframe> instead.

참고 : 유튜브 <object>와 <embed>당신이 사용하는 비디오를 마이그레이션해야 2015 년 1 월부터 사용되지 않는 <iframe>대신.


Example - Using <object> (deprecated)

1
2
3
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>
cs



Example - Using <embed> (deprecated)

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








'HTML' 카테고리의 다른 글

[R]HTML5 드래그 앤 드롭(HTML5 Drag and Drop)  (0) 2018.07.21
[R]HTML5 Geolocation  (0) 2018.07.20
[R]HTML 플러그인(HTML Plug-ins & object & embed)  (0) 2018.07.18
[R]HTML5 오디오(HTML5 Audio)  (0) 2018.07.17
[R]HTML5 비디오(HTML5 Video)  (0) 2018.07.16