h38. HTML 유튜브 비디오 재생

HTML 유튜브 비디오 재생

비디오 형식 때문에 곤란한 경우가 있습니다. 브라우저 버전마다 지원되는 비디오 형식이 달라지기도 합니다. 

그럴때 유튜브 비디오를 사용하면 가장 손쉽게 비디오를 플레이 할수 있습니다.

---

유튜브는 비디오 ID 를 가지고 있는데 11자리 문자 숫자 및 "_" 로 ID 를 부여합니다. (예를 들면 EtRBMUFBTtE 와 같은 형태)

그런데 유튜브에 먼저 비디오를 업로드 해야 합니다. 

업로드 하면 ID 를 알 수 있게 되고 태그를 웹 페이지에 만든 다음, src 속성으로 그 비디오 URL 을 알려줍니다.

그리고, 유튜브에서 공유 버튼을 누르면 "https://youtu.be/I2cGgb1F7Pw" 와 같은 주소가 나오는데, 워드프레스 닷컴 사이트에서는 태그없이 공유 주소만 넣으면 자동으로 유튜브 재생 화면이 나타납니다.

---

유튜브 링크시 활용할 수 있는 기능들이 있습니다. 

파라미터 형태로 지정해 주는데, 위의 예에서 ?autoplay=0 또는 &list=... 과 같이 URL 뒤에 붙여서 쓸수 있습니다.

https://youtu.be/zaHfCHuCedk?autohide=0

값 0: 플레이어의 컨트롤을 항상 보이게 합니다.
값 1: 비디오가 플레이 될 때 컨트롤을 자동으로 감춥니다.
값 2 (기본값): 플레이어 화면이 16:9 나 4:3 비율일 때는 1로 동작, 그 외에는 0으로 동작합니다.

?autoplay=0
값 0 (기본값): 플레이어가 로딩 되었을 때 자동으로 플레이 되지 않습니다.
값 1: 플레이어가 로딩 되면 자동으로 비디오를 플레이 합니다.

?controls=0
값 0: 플레이어 컨트롤이 나타나지 않습니다. 비디오는 즉시 로드 됩니다.
값 1 (기본값): 플레이어 컨트롤이 디스플레이 됩니다. 비디오도 즉시 로드 됩니다.
값 2: 플레이어 컨트롤이 디스플레이 되지만, 비디오는 사용자가 재생을 하기 전에는 비디오가 로딩 되지 않습니다.

?loop=0
값 0 (기본값): 비디오는 한번만 재생됩니다.
값 1: 비디오가 무한 반복 재생됩니다.

?list=
여러개의 비디오를 묶어서 순차적으로 재생되게 할 때 플레이 리스트 목록이 사용됩니다. 
가장 먼저 재생될 비디오의 URL 뒤에 덧붙여 list 를 붙여줍니다.

---

다른 방법으로는 iframe, object, embed 태그를 사용하는 방법이 있습니다.

<iframe width="360" height="202" src="https://www.youtube.com/embed/o_cdhpfEmLM" frameborder="0" allowfullscreen></iframe>

---

아래 오브젝트 태그에서의 유튜브 재생은 차차 더 이상 사용되지 않고 사라지게 된다고 합니다.

<object data="https://www.youtube.com/embed/87bg_YAfaPw" width="360" height="202"></object>

---

아래 임베드 태그에서의 유튜브 재생도 차차 더 이상 사용되지 않고 사라지게 된다고 합니다.

<embed src="https://www.youtube.com/embed/dY8KIMQRTf0" width="360" height="202">

---

[광고] Udemy 동영상 강의로 보기