유튜브 embed 재생 안됨 - yutyubeu embed jaesaeng andoem

[개발/참고] chrome 유튜브 iframe 동영상 자동재생 설정 방법

iframe을 이용하여 유튜브 동영상을 퍼와서 연동할때,

크롬에서 자동재생이 안되는 이슈를 많이들 겪으셨을 껍니다.

아래처럼 동영상 퍼가기 하면 나오는 소스코드를 붙여서 

src 부분에 동영상 embed url 을 입력하고 잘뜨는데 왜 자동재생이 안되는지...

<iframe width="100%" height="100%" src="embed_url" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

저도 한참 찾다가 방법을 찾아서 공유드립니다!

위처럼 그냥 embed_url 의 뒤에 ?autoplay=1 을 붙이면

자동재생이 되야 정상입니다.

explorer에서는 자동재생이 잘되고

chrome에서는 안됩니다...

하지만, 

?autoplay=1&mute=1 를 붙이면

explorer 와 chrome 둘다 정상 동작합니다..

이걸 보고 추측하건데...

chrome 에서는 sound와 관련된 제어 부분까지도 설정을 해줘야 정상동작 하는듯합니다.

위 내용을 참고하셔서 저처럼 삽질하는 분들이 없길...ㅠㅠ

참고하세요!

┖만사만상

크롬이... 치사하게 유튜브 영상의 자동 재생을 막아버리다니!!!

위의 유튜브 영상은 아래의 HTML태그로 작성이 된것인데...

첨에는 네이버에서 막은 줄 알았다. autoplay=1을 삽입해줌으로해서 게시물을 클릭해서 보게되면 유튜브 영상이 자동으로 재생이 된다. 물론 유튜브에서 그렇게 쓰라고 만들어 놓은것이다. 유튜브 튜토리얼에 보면 나와 있다. 그런데 그동안 잘 되던것이... 오늘 갑자기 자동 재생이 되질 않는다. 잉? 머지? 보니깐... 태그가 막혔다. HTML에서 autoplay부분을 막아버렸다. 유튜브에서 막은 것이 아니라 네이버에서 막아버렸다 ㅠㅠ 왜지? 왜? 유튜브도 가만 있는데 (오히려 쓰라고 만들어 놓은건데) 왜 네이버가 막아버리냐고... 완전 치사하다... 증말... 점점 네이버 블로그 쓰기 싫어진다... 증말... 

약간의 오해와 실수가 있었다.

우선 원래의 이 게시물의 제목이었던 '네이버, 치사하게 유튜브 영상의 자동 재생을 막아버리다니!!!' 란 제목부터 고쳤다. 진실은 드러났다... 네이버가 막은 것이 아니었다. (물론 의도치 않았으나 결론적으로 막은것이 되긴 했다... 뒤에 자세한 내용 있음)

유튜브에서 약간의 태그 수정이 있었던것 같다. 그리고 자동플레이가 되지 않는것은... 크롬에서만 그런것이었다. 하필 태그가 바뀌면서(네이버 게시물 등록을 하면 로봇이 자동으로 태그를 수정하는 행위 따위를 하는) 그 시기에 영상 자동플레이가 되던것이 안되니 당연히 네이버가 막았다라고만 생각을 해버렸다 ㅠㅠ 네이버야 미안해... 가만히 있는 네이버에게 짜증만을 냈구나. 자세히 알아보지도 않고. (이것에 대한 만큼은 내가 미안해~) 그러나 결국은 네이버의 태그 제한 때문에 자동 플레이가 되지 않는것도 맞으니 씁쓸하게 사과할거야... ㅋㅋㅋ

그렇다면!!! 네 이놈 크롬~크롬~ 왜 그런것이냐!!! 이것 또 나의 오해인것이냐? MS 인터넷익스플로어에선 잘 되는데 하물며 엣지에서도 되는데 크롬에서만 안되는구나!!! 구글링을 해보니 크롬의 정책이 바뀌었다고 한다. 2018년 4월 어느날에... 자동플레이를 막았다고 한다. 다만 허용하는 방법도 있는데 allow란 태그를 이용해서 허용한다는 것이다.

원문 : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

유튜브 embed 재생 안됨 - yutyubeu embed jaesaeng andoem

즉,

위의 소스를 입력하면 네이버는 아래 처럼 바꿔버린다

<!-- Not Allowed Attribute Filtered ( allow="autoplay; encrypted-media") --><iframe src="https://www.youtube.com/embed/vOM3CE_1mv0?autoplay=1" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" width="560" height="315"></iframe>

위의 코드처럼 기존의 autoplay=1 옵션을 이용해서 자동플레이는 되긴 하는데 iframe 태그에 allow="autoplay; encrypted-media" 를 넣어주어야 된다. 그런데!!!! 여기서!!!!!! 네이버가 저 allow 태그를 허용을 안해준다 ㅠㅠ 막아버렸다. 자동플레이가 안되게 의도적으로 막았다고 하는 의심에 대해서는 익스큐즈 ^^;; 그치만 태그 사용 허용에 너무 짠건 여전해!

정리하자면

유튜브 영상을 네이버 블로그나 카페에 넣을때 embed 소스는 아주 예전부터 못 쓰게 막아놨었고 그나마 iframe 을 이용하여 유튜브 등의 영상을 넣게 되었는데~ (물론 블로그 글쓰기할때 외부영상 링크 걸기로 유튜브 등의 영상을 편하게 넣을 수도 있음, 크기 조절이나 자동재생 설정을 못하는게 아쉬움) 그리하여 게시물 볼때나 로딩할때 영상이 자동으로 플레이 되게끔 (음악이 자동으로 시작이 되게끔) 하는것이 가능하였다. 그런데 이제 이것마저 MS IE 브라우저(Edge도 되고)에는 되고 구글 크롬에서는 안된다. 네이버가 아닌 타 블로그에서는 바뀐 크롬 정책만 따르면 큰 무리 없이(이미 유튜브도 따라가고) 사용 가능하다. 뭐, 결론은 네이버만 안된다... 가 아니라 ㅎㅎㅎㅎㅎ 크롬의 설정을 바꿔주면 네이버에서도 유튜브 자동 재생은 된다

https://blog.naver.com/digitalog/221319052018

유튜브 embed 재생 안됨 - yutyubeu embed jaesaeng andoem

유튜브 embed 재생 안됨 - yutyubeu embed jaesaeng andoem