Embed 자동 재생 - Embed jadong jaesaeng

이번 글에서는 Web에서 자동 재생되는 유튜브 영상을 보여주는 방법에 대해 작성하겠습니다!

방법은 간단합니다.

1. 특정 Youtube 영상의 '공유'버튼을 클릭하여 퍼가기 버튼을 클릭하여 코드를 복사한다. (특정 부분만 사용!)

Embed 자동 재생 - Embed jadong jaesaeng
스크린샷) 영상에서 '공유' 버튼을 클릭하면 해당영상의 주소(빨간표시)가 나온다! 파란 표시를 클릭해도 볼 수 있다.

2. Youtube 영상을 표시할 html 파일에서 <body> 내에 아래 코드를 적는다.

<iframe width="가로사이즈" height="세로사이즈" src="https://www.youtube.com/embed/영상키값?rel=0&amp;autoplay=1&mute=1&amp;loop=1;playlist=영상키값" frameborder="0"></iframe>

가로, 크기는 자신이 나타내고 싶은 크기로 지정해주고, 위에서 복사한 주소를 영상키값에 넣어주면 됩니다.

여기서 중요한 것은 autoplay=1&mute=1 입니다! autoplay=1만 해줄 경우, 신기하게도 먹히지가 않아요..

그래서 음소거 기능을 켜주는 mute=1 을 추가해줘야 자동 재생이 됩니다.

예를 들면) 위의 유튜브영상의 주소는 'J08a3_dGtmo' 이었으니, 아래와 같이 적어줄 수 있습니다.

<iframe allowfullscreen width="1400" height="800" src="https://www.youtube.com/embed/J08a3_dGtmo?rel=0&amp;autoplay=1&mute=1&amp;loop=1;playlist=J08a3_dGtmo" frameborder="0"></iframe>
iframe의 요소
- src : youtube 주소
- frameborder : YouTube를 표시할 때 외곽선 값 (0으로!)
- allowfullscreen : 전체화면 모드를 허용할 것인지 여부
- width : 영상 가로 크기
- height : 영상 세로 크기

3. 끝.

Embed 자동 재생 - Embed jadong jaesaeng

아쉬운 점은 영상이 자동재생과 동시에 음소거가 된다는 점이네요.

이상 글을 마치겠습니다!

유튜브에서 공유하기를 클릭하면 아래와 같이 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 뒷부분에 붙이면 유용한 플레이어 매개변수에 대해 알아봅니다.

무한 반복재생
&amp;playlist=비디오ID&loop=1

* 비디오ID 부분에 해당 영상의 ID값을 그대로 복사해서 넣어줍니다.

플레이어 컨트롤
&controls=0 <!-- 숨기기 -->
&controls=1 <!-- 보이기 -->
동영상 자동 재생
&autoplay=1
컨트롤바 유튜브 로고 제거
&modestbranding=1

플레이어 컨트롤바 오른쪽 부분에 youtube 로고를 제거합니다.

재생 시작시간 지정
&start=15

15초 부터 재생합니다.

재생 종료시간 지정
&end=15

영상 시작시간 부터 15초 까지만 재생합니다.

Embed 자동 재생 - Embed jadong jaesaeng

유튜브 바로가기 ▶ http://www.youtube.com

요즘은 이런 저런 이유로 유투브에서 영상을 가져와서 블로그나 사이트에 올리는 것을 많이들 보셨을 겁니다.

유투브 동영상 퍼오기는 많은 분들께서 다 알고 계실 겁니다만,
제 포스트가 항상 그렇듯 오늘도 초보 유저분들을 위한 포스팅입니다.

1. 유부트 동영상 퍼오기

다른 사람들과 공유 설정된 영상에는 동영상 밑에 공유 라는 탭이 보이는데요.
퍼 오시려는 영상 밑에 공유를 클릭~

다시 소스 코드를 클릭하면 iframe 소스 코드가 보여 지는데요.
기본적으로 제공되는 4개의 동영상 크기를 클릭하면 자동으로 소스 코드가 생성되구요.
자신의 블로그나 웹 페이지에 맞게 가로 폭을 써 주시면 맞춤형으로 퍼 올 수도 있습니다.

Embed 자동 재생 - Embed jadong jaesaeng

iframe 소스가 적용이 안되는 사이트가 있을 텐데요.
이전 소스 코드 사용에 첵크하시면 소스 코드가  object,embed로 바뀌는데요.
원하시는 사이즈 선택,복사...올리려는 웹페이지에 붙여넣기 하면 되겠습니다.

2. 자동 재생 소스 코드

유투브에 들어가서 보고 싶은 동영상을 클릭하면 자동 재생이되지요?
그러나 퍼온 동영상을 블로그나 웹 페이지에 올리고 보면 자동 재생이 안되고 플레이어를 클릭해야 재생이 됩니다.

간단하게 소스 코드 편집으로 자동으로 재생되게 할 수 있는데요.
아래 소스 코드는 제가 유투브에 올렸던 소스 코드입니다.

<iframe width="550" height="413" src="http://www.youtube.com/embed/U-oWmmyKtQY" frameborder="0" allowfullscreen></iframe>

자동 재생되는 iframe 소스 코드 편집

아래 소스 코드에서 빨간색으로 표시 된 ?&autoplay=1 이 자동 재생 명령어 입니다.

<iframe width="550" height="413" src="http://www.youtube.com/embed/U-oWmmyKtQY?&autoplay=1" frameborder="0" allowfullscreen></iframe>

자동 재생되는 embed 소스 코드 편집

편집할 부분은 굵게 표시된 <embed src= ~부분입니다.

<object width="550" height="413"><param name="movie" value="http://www.youtube.com/v/U-oWmmyKtQY?version=3&amp;hl=ko_KR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/U-oWmmyKtQY?version=3&amp;hl=ko_KR" type="application/x-shockwave-flash" width="550" height="413" allowscriptaccess="always" allowfullscreen="true"></embed></object>

소스 코드 중에서 version=3 지워 주시고 영상 주소 ko_KR뒤에 &autoplay=1 입력 하시고 <embed 이 부분만 드래그 복사 ,

붙여넣기해도 자동 재생 동영상을 볼 수 있습니다.

<embed src=http://www.youtube.com/v/U-oWmmyKtQY?version=3&amp;hl=ko_KR&autoplay=1 type="application/x-shockwave-flash" width="550" height="413" allowscriptaccess="always" allowfullscreen="true"></embed>

참고로 퍼온 영상 소스 코드에 autoplay (자동 재생)의 명령어를 넣는 건 유투브 정책, 접근성에 위배 된다는 걸 명심하세요~

유투브에 동영상 올리기 ▶http://sunstar2.tistory.com/330