유튜브 영상 반응형 자동반복 설정 및 추천영상 제거 방법 (코드 예시)
기술정보 25.06.18유튜브 영상, 반응형에 자동반복·추천영상 제거까지 한번에!
웹사이트에 유튜브 영상을 넣을 때, 자동으로 재생되고 끝나면 반복까지 되면 좋겠죠?
게다가 영상이 끝나고 나서 뜨는 추천영상까지 없애면 방문자 입장에서 훨씬 깔끔한 경험이 될 거예요.
➰➰➰
그런데 사실 유튜브 임베드에선 그냥 autoplay=1만 넣는다고 자동재생이 되는 게 아니에요.
요즘 브라우저 정책 때문에 무조건 음소거(mute=1)도 함께 넣어줘야 하고,
반복을 원한다면 loop=1뿐만 아니라 playlist 파라미터도 꼭 넣어줘야 해요.
그리고 추천영상 제거는 rel=0이 핵심입니다.
⚡ 아래처럼 짜면 딱 좋아요!
1. html 코드
1 2 3 4 5 6 7 8 | <div class="video-wrapper"> <iframe frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> </div> | cs |
2. css 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 비율 */ height: 0; overflow: hidden; pointer-events: none; /* 클릭 방지 */ } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> | cs |
코드 설명
파라미터 | 설명 | |
|---|---|---|
autoplay=1 | 영상 자동재생 | |
mute=1 | 자동재생 위해 음소거 필수 | |
loop=1 + playlist=영상ID | 자동반복 재생 | |
rel=0 | 추천영상 안 뜨게 | |
pointer-events: none | 영상 클릭 안 되게 (컨트롤 차단) | |
padding-bottom: 56.25% | 반응형 크기 조절 (16:9 비율) | |
➰➰➰
유튜브 영상 자동재생부터 반복 재생, 추천영상 제거까지
꼼꼼하게 설정하는 방법, 잘 보셨나요?
반응형으로 깔끔하게 맞추고, 클릭 방지까지 더하면
웹사이트 방문자에게 한층 더 편안한 시청 경험을 제공할 수 있어요.
앞으로도 디자인과 기능을 동시에 챙기는 노하우,
디자인키트에서 계속 알려드릴게요!
궁금한 점이나 더 알고 싶은 팁 있으면 언제든 편하게 찾아와 주세요 :)
