라이브러리 이슈/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&amp;autoplay=1&mute=1&amp;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/유튜브-영상-자동-재생되도록-삽입하는-방법/

반응형