본문 바로가기

유튜브 자동재생 html 태그: 사이트나 블로그로 퍼갈 때

엉클샘 발행일 : 2022-07-28

웹사이트나 카페, 개인 블로그 등등으로 유튜브를 퍼갈 때 소스코드를 복사해서 글 작성 시 붙여 넣기를 하죠. 그런데 퍼간 유튜브 영상이 자동으로 재생되게 하고 싶을 땐 어떻게 해야 할까? 사이트 자체의 설정이 없는 이상 직접 몇 가지 코드를 삽입해 주어야 합니다. 자세한 유튜브 자동재생 html 태그를 알아보도록 하겠습니다.

 

다른 사이트에 유튜브를 삽입하기 위해 유튜브 영상에서 마우스 우클릭을 한 후 소스 코드 복사를 클릭합니다.

유튜브 소스 코드 복사

소스 코드 복사를 하면 윈도우 클립보드에 복사가 되며 단축키 Ctrl+V를 눌러 붙여 넣기 하실 수 있습니다.

 

유튜브 소스코드

메모장을 열어서 붙여넣기를 했더니 iframe으로 된 코드가 나옵니다. 유튜브 자동재생을 이용하려면 기존 것은 건드릴 필요 없이 2개의 코드만 추가하시면 됩니다.

 

유튜브 자동재생 html 소스코드

소스 코드 중 https가 있는 라인이 영상의 주소이며 나머지는 옵션 사항입니다. https 끝 쌍따옴표 안 쪽에 아래 코드를 삽입하시면 됩니다.

 

?autoplay=1&mute=1

 

  • 앞에 물음표를 넣어줍니다.
  • autoplay=1은 자동재생 코드이며 값(숫자)을 0으로 바꾸면 자동재생이 되지 않습니다.
  • mute=1은 음소거 코드이며 값을 0으로 바꾸면 소리가 재생됩니다.
  • 두 코드 사이에 &를 넣어줍니다.

 

음소거 코드를 같이 넣는 이유는 크로미움 기반의 웹 브라우저에서는 음소거를 하지 않으면 자동재생도 안 되기  때문입니다. 유튜브 자동재생을 시키려면 꼭 mute=1도 같이 삽입하셔야 정상 작동합니다. (mute 코드가 없거나 값을 0으로 하면 자동재생 안 됨)

 

그리고 자동재생이 되는데 갑자기 큰 소리가 난다면 보는 사람들이 놀라수도 있기 때문에 자동재생 사용할 때는 음소거를 하시는 것이 좋습니다.

 

추가로 홈페이지나 쇼핑몰, 블로그 등에 유튜브 소스코드를 삽입할 때는 꼭 html 모드로 글을 작성하셔야 한다는 점을 주의하시기 바랍니다.

 

아래는 샘플로 올려놓은 자동 재생되는 유튜브 영상입니다.

 

▼추가로 볼만한 글

사이트에 유튜브 링크 전체 화면 반응형 코드로 삽입하기

크롬 네이버 유튜브 화면 오류는 자바스크립트 차단 해제로

유튜브 내 댓글 기록 확인 및 삭제하는 방법

반응형

댓글