새터의태양

오늘 알아볼 소스코드는 PC에서만 적용되며, 모바일 환경에서는 자동재생 및 반복 재생 코드를 사용해도 반복 재생은 가능하나 자동재생은 먹히지 않는다는 점 참고하시구요.

유튜브에서 동영상을 퍼왔을 때 2022.01.20일 현재 소스코드는 아래와 같은데요.

위 코드를 블로그에서 자동 재생하고 싶다면 동영상 고유코드 뒤에 ?amp;autoplay=1을 넣어 주면 됩니다.

그런데 블로그에서 동영상 소스코드를 넣을 때 일반적으로 HTML모드로 전환해 붙여 넣을 텐데요.

HTML모드에서 기본 모드로 전환해 보면 자동재생이 안 될 겁니다.

다시 HTML으로 가서 소스코드를 살펴보면 아래와 같이 변환되어 있을 텐데요.

<iframe width="560" height="315" src="https://www.youtube.com/embed/동영상 고유코드?&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>

위 소스코드는 유튜브에서 퍼온 소스코드와 달리 간단하게 변환되어 있는데요.

이 소스코드 allowfullscreen="" 뒤에 allow="autoplay;"를 넣어주고 현 상태(HTML)에서 완료 버튼을 눌러 등록을 하면 1회에 한하여 자동재생이 됩니다.

◈ 자동재생 및 반복 재생 소스코드

여기서 autoplay=1은 자동재생, playlist=동영상 고유코드&loop=1 를 넣으면 반복 재생 소스코드인데요,

반복 재생 소스코드는 아무 문제없지만, 자동 재생 소스코드는 HTML에서 기본 모드로 전환하거나, 글을 수정할 때마다  allow="autoplay;" 이 부분이 날아가 버리기 때문에 그때마다 다시 넣어줘야 하구요~🤔

그 이유가 퍼 간 동영상에 한하여 자동재생 부분을 유튜브가 막는 건지?

티스토리 정책 때문인지 모르나 페이지를 새로 고침 해도 자동 재생은 되지 않습니다.

여기까지 제가 아는 한도에서 두드려 봤는데요.

좀 더 좋은 팁이 있다면 공유해 주세요~😁

-----

P.S

반응형 스킨에서 CSS 등에 반응형 코드가 심어져 있거나, 제 블로그 스킨처럼 반응형 코드를 지원하는 스킨은 굳이 가로폭과 세로폭을 지정하지 않아도 됩니다.

ex) width="560" height="315"

<iframe src="https://www.youtube.com/embed/동영상 고유코드?amp;autoplay=1&amp;playlist=동영상 고유코드&amp;loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" allow="autoplay;"></iframe>

P.S

위 아이프레임 소스 코드는 확인해 보니 자동 재생 및 반복 재생이 되질 않습니다.