HTML - 유튜브 iframe 연속재생, 자동재생, 컨트롤러, 아이폰 전체화면

티스토리 HTML 썸네일

유튜브 iframe

웹사이트에 YouTube 동영상 플레이어를 퍼가고 JavaScript를 사용하여 플레이어를 제어할 수 있다. 동영상을 재생, 일시중지 또는 중지하거나, 플레이어 볼륨을 조정하거나, 재생 중인 동영상에 대한 정보를 가져올 수 있다. 또한 플레이어 상태 변경 또는 동영상 재생 품질 변경과 같은 특정 플레이어 이벤트에 대한 응답으로 실행되는 이벤트 리스너를 추가할 수 있다.

 

 

 

예시

<iframe width="560" height="315" src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

 

자동재생

src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&autoplay=1&mute=1"

 

 

반복재생

src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&loop=1"

 

 

자동재생 + 반복재생

src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&autoplay=1&mute=1&loop=1"

 

 

컨트롤러 제거

src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&controls=0"

 

 

아이폰 인라인 재생

src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&playsinline=1"

 

 

 

 

주요 매개변수

autoplay	초기에 동영상 자동 재생 여부 (0 or 1)	기본값 0 (자동재생x)
mute	음소거 여부 (0 or 1)	기본값 0 (음소거x) ※autoplay를 사용 하는경우 반드시 지정
controls	컨트롤을 표시 여부 (0 or 1)	기본값 1 (컨트롤표시o)
disablekb	키보드 컨트롤 여부 (0 or 1)	기본값 0 (컨트롤o)
enablejsapi	youtube API 사용 여부 (0 or 1)	기본값 0 (사용x)
origin	추가 보안 수단 (현재도메인)	※enablejsapi을 사용하는 경우 반드시 지정
loop	반복 재생 여부 (0 or 1)	기본값 0 (반복재생x)
playsinline	전체화면 or 인라인 재생 여부 (0 or 1)	기본값 0 (전체화면o) ※아이폰에서 전체화면 재생방지