Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 프론트엔드부트캠프후기
- 부트캠프 취업후기
- js CRUD
- sqld 55회
- Filter
- 2024 sqld
- Firebase
- TypeScript
- sqld 자격증 시험
- foreach
- 패스트캠퍼스 부트캠프
- firebase rules
- 프론트엔드개발자
- map
- 야놀자 fe 1기
- css 꿀팁
- 퍼블리셔 이직후기
- react hook
- github
- 국비지원
- 패스트캠퍼스
- 야놀자x패스트캠퍼스
- 부트캠프
- promise 비동기처리
- 리액트오류
- Where
- git
- 성능개선
- reduce
- 국비지원취업
Archives
- Today
- Total
Tech is created to fix problem
youtube iframe 자동재생 data-autoplay, data-keepplaying 본문
반응형
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/유튜브-영상-자동-재생되도록-삽입하는-방법/
반응형