라이브러리 이슈/youtube
youtube iframe 자동재생 data-autoplay, data-keepplaying
furaha
2023. 7. 21. 15:33
반응형
1. youtube 자동재생
유투브에서 iframe 주소 복사 후,
<iframe width="가로사이즈" height="세로사이즈" src="https://www.youtube.com/embed/영상키값?rel=0&autoplay=1&mute=1&loop=1;playlist=영상키값" frameborder="0"></iframe>
1) 자동재생
소스상으로는, ?autoplay=1 라는값만 넣었을때 자동재생하게되어있지만
크롬에서는 음소거를 해주지않으면 자동재생이 되지않기 때문에,
&mute=1 음소거를 추가하여 크롬에서도 자동재생이 되도록 한다!!
(아이폰은 playsline 넣어주어야함. 그래서 autoplay muted playsinline은 셋트임)
2) 썸네일 먼저 업로드
로딩이 빠르게 되게 하고 싶으면 autoplay=2를 넣으면 썸네일만 먼저 업로드 되고, 재생을 눌렀을 경우에 영상 로딩됨.
2. 유투브 반응형 부트스트랩 클래스명
embed-responsive embed-responsive-16by9
3. 스와이퍼에 유투브 넣기
- video 태그 안에 source 태그 넣고 모든 속성은 video 태그에만
- data-autoplay 자동재생하려면 autoplay 앞에 data- 넣어줘야함
- fullpage에서 youtube나 video 쭉 재생되게 하려면? data-keepplaying 붙여줄것!!!!!!!!!!!!!!!
잘 설명되어 있는 링크 : https://www.thewordcracker.com/basic/유튜브-영상-자동-재생되도록-삽입하는-방법/
반응형