HTML - 유튜브 iframe 연속재생, 자동재생, 컨트롤러, 아이폰 전체화면
2024. 7. 24.
유튜브 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) ※아이폰에서 전체화면 재생방지 |