티스토리 블로그 유튜브 무한재생, 자동재생 설정법.

티스토리를 블로그를 운영하면서 배울것은 참 많은것 같습니다.

저도 블로그를 시작하면서 많이 배우려고 노력하고 있습니다. 

오늘은 유튜브 영상을 클릭하지 않아도 자동으로 재생되게 하고, 무한으로 반복 재생되는 코드를 배워볼까 합니다.

가져오고 싶은 유튜브 영상에 우클릭을 하고, 소스코드 복사를 해줍니다. (HTML코드 입니다.)

복사한 코드입니다.

<iframe> width="1280" height="720" src="https://www.youtube.com/embed/GgCNdUmsDYE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

명령어를 추가해주면 됩니다.

width="1280" height="720"	큰 따옴표 안의 숫자를 변경하여 폭과 너비를 설정.
amp;autoplay=1	자동재생 코드
amp;playlist=GgCNdUmsDYE&loop=1	반복 재생 코드

반복 재생 코드의 amp;playlist=GgCNdUmsDYE 굵은 표시를 한 부분은 복사한 코드의 /embed/GgCNdUmsDYE 부분의

embed 뒷 부분인 주소를 따와야합니다!

amp;playlist="복사한 주소"&loop=1 로 정리할 수 있겠네요.

<iframe src="https://www.youtube.com/embed/GgCNdUmsDYE ?amp;autoplay=1&amp;playlist=GgCNdUmsDYE&loop=1" width="720" height="360" frameborder="0" allowfullscreen=""></iframe>

저는 이렇게 수정하였습니다.

 

 

소스 코드 복사는 이렇게 위치되어 있습니다.

+ 크롬과 몇몇 브라우저에선 음소거 안하면 자동재생이 안된다고 합니다.

자체적으로 차단해 놨다고 하네요.

음소거코드인

&mute=1 를 붙히시면 잘 될거예요.

그래서 최종 수정은

<iframe src="https://www.youtube.com/embed/GgCNdUmsDYE?amp;autoplay=1 &playlist=GgCNdUmsDYE&loop=1&mute=1" width="720" height="360" frameborder="0" allowfullscreen=""> </iframe>

이렇게 loop=1뒤에&mute=1을 추가해주면 됩니다.

봐주셔서 감사합니다 ! 좋은 하루 되세요 :)