HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML YouTube 동영상


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


비디오 형식으로 어려움을 겪고 계십니까?

비디오를 다른 형식으로 변환하는 것은 어렵고 시간이 많이 소요될 수 있습니다.

더 쉬운 해결책은 YouTube가 웹 페이지에서 동영상을 재생하도록 하는 것입니다.


YouTube 동영상 ID

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

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


HTML로 YouTube 비디오 재생

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

  • YouTube에 동영상 업로드
  • 비디오 ID를 기록해 둡니다.
  • <iframe>웹 페이지에서 요소 정의
  • src속성이 비디오 URL을 가리키도록 하십시오 .
  • width height속성을 사용하여 플레이어의 차원을 지정합니다 .
  • URL에 다른 매개변수를 추가합니다(아래 참조).

예시

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

YouTube 자동재생 + 음소거

autoplay=1YouTube URL 에 추가하여 사용자가 페이지를 방문할 때 동영상이 자동으로 재생되도록 할 수 있습니다 . 그러나 비디오를 자동으로 시작하는 것은 방문자에게 성가신 일입니다!

참고: Chromium 브라우저는 대부분의 경우 자동 재생을 허용하지 않습니다. 그러나 음소거된 자동 재생은 항상 허용됩니다.

동영상이 자동으로 재생되도록 하려면(음소거됨) mute=1뒤에 추가 하세요. autoplay=1

YouTube - 자동재생 + 음소거

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


유튜브 재생목록

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


유튜브 루프

loop=1비디오가 영원히 반복되도록 추가하십시오 .

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

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

YouTube - 루프

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

YouTube 컨트롤

controls=0비디오 플레이어에서 컨트롤을 표시하지 않으려면 추가하십시오 .

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

값 1(기본값): 플레이어가 디스플레이를 제어합니다.

YouTube - 컨트롤

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