video 태그로 동영상을 삽입하면, 트랙픽이 많이 나가는 단점이 있다고 한다.
이에 대한 방안으로 유튜브 iframe을 삽입하는 방법이 있다.
1.유튜브 동영상을 html 태그로 가져와 웹페이지에 삽입
1)지정한 영상의 공유버튼을 누르고 퍼가기 클릭
2)동영상퍼가기에서 나오는 iframe 태그 내용을 복사한 후 그대로 html에 붙여넣으면 완료.
2.속성추가
여기서 자동재생과 반복재생 기능을 넣고싶을 때
마크업 태그안에 매개변수를 넣어 제어 하면된다.
"https://www.youtube.com/embed/ibYD23-dtjo"
iframe태그에서 ibYD23-dtjo 이부분은 해당영상의 ID값이다.
속성은 이 뒤로 물음표를 붙인 후 이어 넣어주면된다.
1 - 자동재생
"https://www.youtube.com/embed/ibYD23-dtjo?autoplay=1&mute=1"
영상 정책상, 음소거 일 경우에만 자동재생이 되기 때문에 autoplay가 제대로 작동하려면 mute 를 꼭 넣어주어야 한다.
3 - 하단 컨트롤러 숨기기
"https://www.youtube.com/embed/ibYD23-dtjo?autoplay=1&mute=1&controls=0"
4 - 반복재생
반복재생 속성값은 loop=1 이지만, playlist도 함께 넣어줘야 동작이 된다
해당 동영상의 id값을 playlist에 또 넣어주어야한다.
"https://www.youtube.com/embed/ibYD23-dtjo?autoplay=1&mute=1&controls=0&loop=1&playlist=ibYD23-dtjo"
See the Pen ifame AutoVideoPlayer by rebornbb (@bongcasso01) on CodePen.
728x90
