HTML YouTube 비디오

추천 강의:

HTML에서 비디오를 포함하는 가장 간단한 방법은 YouTube를 사용하는 것입니다.

비디오 형식에 대해 고민하고 계신가요?

비디오를 다른 형식으로 변환하는 것은 어렵고 시간이 많이 걸립니다.

더 간단한 해결책은 YouTube에서 웹 페이지에서 비디오를 재생하는 것입니다.

YouTube 비디오 Id

비디오를 저장(또는 재생)할 때, YouTube는 id를 표시합니다(예: ih1l6wb7LhU)

이 id를 사용하여 HTML 코드에서 비디오를 참조할 수 있습니다.

HTML에서 YouTube 비디오를 추가합니다

  • 웹 페이지에서 비디오를 재생하려면 다음 작업을 수행하세요:
  • YouTube에 비디오를 업로드하세요
  • 비디오 id를 기억하세요 웹 페이지에서 정의합니다 <iframe>
  • 를 요소 src
  • 속성을 사용하여 비디오 URL을 지정합니다 width 및 height 프레임워크 크기를 정의하는 속성
  • URL에 다른 매개변수를 추가하세요(다음을 참조)

예제

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

직접 시험해 보세요

YouTube Autoplay + Mute

사용자가 페이지에 접근할 때 자동으로 재생되도록 YouTube URL에 autoplay=1을 추가할 수 있습니다. 그러나, 자동 재생된 비디오는 방문자에게 불편함을 줄 수 있습니다!

注意：

대부분의 경우, Chromium 브라우저는 자동 재생을 허용하지 않습니다. 그러나 항상 음소거 자동 재생을 허용합니다. autoplay=1 이후 추가 mute=1비디오가 자동으로 재생됩니다(음소거 상태).

YouTube - 자동 재생 + 음소거

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

직접 시험해 보세요

YouTube 플레이리스트

재생할 비디오 목록(원래 URL 제외)을 콤마로 구분합니다.

YouTube 루프

추가 loop=1 비디오가 영원히 반복됩니다.

값 0(기본): 비디오가 한 번만 재생됩니다.

값 1: 비디오가 반복됩니다(영원히).

YouTube - 루프

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

직접 시험해 보세요

YouTube 제어판

추가 controls=0 비디오 플레이어에 제어판을 표시하지 않습니다.

값 0: 플레이어 제어판이 표시되지 않습니다.

값 1(기본): 플레이어 제어판이 표시됩니다.

YouTube - 제어

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

직접 시험해 보세요