Iframe 유튜브 모바일 자동재생 - iframe yutyubeu mobail jadongjaesaeng

Question

유튜브에서 공유하기를 클릭하면 아래와 같이 iframe 소스를 이용해 다른 곳으로 퍼갈 수 있죠.

목차 Show

1. 페이지 로드 시 유튜브영상 자동 재생 방법
2. 한 영상을 반복해서 재생하기
3.특정시간부터 재생
4. 컨트롤바 숨김
유튜브 매개변수
자동 재생, 연속재생 등
mute=1일경우 autoplay
setVolume(0)하면 autoplay유효
event ready에서 setVolume(0)하고 playing에서 setVolume(100)하면 어떻게 될까
왜 autoplay가 동작하지 않는가?
모바일에서도 autoplay가 동작하지 않는 이유

<iframe width="560" height="315" src="https://www.youtube.com/embed/비디오ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

이런 iframe 소스에서 /embed/비디오ID 뒷부분에 붙이면 유용한 플레이어 매개변수에 대해 알아봅니다.

무한 반복재생

&amp;playlist=비디오ID&loop=1

* 비디오ID 부분에 해당 영상의 ID값을 그대로 복사해서 넣어줍니다.

플레이어 컨트롤

&controls=0 <!-- 숨기기 -->
&controls=1 <!-- 보이기 -->

동영상 자동 재생

&autoplay=1

컨트롤바 유튜브 로고 제거

&modestbranding=1

플레이어 컨트롤바 오른쪽 부분에 youtube 로고를 제거합니다.

재생 시작시간 지정

&start=15

15초 부터 재생합니다.

재생 종료시간 지정

&end=15

영상 시작시간 부터 15초 까지만 재생합니다.

1. 페이지 로드 시 유튜브영상 자동 재생 방법

iframe의 src 링크 뒤에 ?amp;autoplay=1삽입

(정지=0, 재생=1 이며 기본값은 0)

* 스마트폰, 태플릿 등 모바일 기기에서는 영상재생 시 데이터가 소모되기 때문에 기기 설정에 따라 자동영상 재생에 제한이 있다고함.

2. 한 영상을 반복해서 재생하기

iframe의 src 링크 뒤에 ?amp;loop=1삽입

(정지=0, 재생=1 이며 기본값은 0)

3.특정시간부터 재생

! 동영상 퍼가기 기능에 "시작 시간"을 입력하면 자동으로 코드가 생성됨

iframe의 src 링크 뒤에 ?start=숫자(초)삽입

4. 컨트롤바 숨김

iframe의 src 링크 뒤에 ?controls=0삽입

(숨김 =0, 표시=1 이며 기본값은 1)

그 외 유튜브에서 제공하는 다양한 매개 변수

https://developers.google.com/youtube/player_parameters?hl=ko

유튜브 매개변수

자동 재생, 연속재생 등

선 결론

2018년 4월부터 autoplay옵션은 동작하지 않음.

단 영상이 음소거 상태일경우 동작함.

Youtube를 iframe으로 재생할때 autoplay라는 옵션이 있다.

player를 읽어온후 영상을 자동재생하는 옵션이다. 디폴트는 0으로 자동재생하지 않는다. 1일 경우 자동재생이 가능하다.

라고 도큐멘트에 설명되어있지만 실제로는 동작하지 않는다고 한다.

아래 stackoverflow에서 발췌

Note:autplay is not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL I have updted my answer please check!!

mute=1일경우 autoplay

mute=1일 경우 동작한다고 하는데 필자가 테스트한 결과 동작하지 않았음.

setVolume(0)하면 autoplay유효

setVolume(0)을 설정하면 autoplay가 동작했다.

ready(){
  this.player.mute();
  this.player.setVolume(0);
}

메모

event ready에서 setVolume(0)하고 playing에서 setVolume(100)하면 어떻게 될까

귀신같이 알아서 정지시킴..

playing이 불려진 시점에서 영상이 정지된 상태가됨

왜 autoplay가 동작하지 않는가?

YouTube Autoplay not working, It's not working since April of 2018 because Google decided to give greater src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=  If autoplay is not working for you the next time you’re trying to watch videos on YouTube, then try one of the methods that follow. Make sure that Autoplay is enabled Regardless of all of the other settings and options that you tweak and play with, if you haven’t enabled the autoplay feature on YouTube then it simply will not work.

Why does my YouTube video not autoplay?, If autoplay is not working for you the next time you're trying to watch videos on YouTube, then try one of the methods that follow. Make sure that  It's not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL.

모바일에서도 autoplay가 동작하지 않는 이유

의도치 않은 네트워크 트래픽으로 인한 과도한 요금 청구등을 막기 위한

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

모바일 고려사항
자동 재생 및 스크립트 재생
특정 모바일 브라우저(예: Chrome 및 Safari)의 HTML5 <video> 요소는 사용자 상호작용(예: 플레이어에서 탭하기)으로 시작되는 경우에만 재생되도록 허용합니다. 다음은 Apple의 도움말에서 발췌한 내용입니다.

'경고: 데이터 네트워크에서 사용자에게 비용이 부과되는 원하지 않는 다운로드가 발생하는 것을 방지하기 위해 삽입된 미디어는 iOS의 Safari에서 자동으로 재생될 수 없습니다. 항상 사용자가 재생을 시작합니다.'

이러한 제한으로 인해 autoplay, playVideo(), loadVideoById()와 같은 매개변수 및 함수는 모든 모바일 환경에서 작동하지 않습니다

PlayVideo Document

Link