[HTML] iframe 유튜브 동영상 자동 연속재생

 

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.

 

 

 

 

 

정리 참고 원본 링크 : https://gyuri-v.tistory.com/entry/%EB%8F%99%EC%98%81%EC%83%81-%EC%99%84%EC%A0%84-%EC%A0%95%EB%B3%B5-%E2%91%A1-%EC%9C%A0%ED%8A%9C%EB%B8%8C-iframe