Html 유튜브 영상 자동재생 - html yutyubeu yeongsang jadongjaesaeng

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

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

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

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

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

?autoplay=1&mute=1

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

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

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

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

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

▼추가로 볼만한 글

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

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

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

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

<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 뒷부분에 붙이면 유용한 플레이어 매개변수에 대해 알아봅니다.

무한 반복재생

&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)

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

<iframe width="" height-"" src="유튜브링크?amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

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

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

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

<iframe width="" height-"" src="유튜브링크?amp;loop=1" frameborder="0" allowfullscreen></iframe>

3.특정시간부터 재생

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

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

<iframe width="" height-"" src="유튜브링크?start=30" frameborder="0" allowfullscreen></iframe>

4. 컨트롤바 숨김

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

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

<iframe width="" height-"" src="유튜브링크?controls=0" frameborder="0" allowfullscreen></iframe>

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

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

유튜브 매개변수

자동 재생, 연속재생 등