본문 바로가기

IT 서비스 바라보기/Website

유투브(Youtube) 동영상 자동 재생 및 특정 위치 재생 만들기, 메뉴바 숨기기



안녕하세요. 하늘다래입니다.
여러 사이트들을 돌아다니다보면 게시물 제목에 <자동재생> 이라고 표기되어 게시물을 열면 동영상이 자동으로 재생되는 것을 많이보셨을 것이라 생각합니다. 이 방법은 HTML 태그를 어느정도 아시는 분이면 매우 간단한 방법인데 오늘 팁은 초보자용이라고 생각하시면서 읽으시면 되겠습니다. 
덤으로 <자동재생> 뿐만 아니라 <특정위치재생>, <메뉴바 숨기기> 까지 배워보죠. ^^

 
  자동재생 만들기

0. 유투브에 접속합니다.
1. 원하는 동영상을 찾아서 <공유> 버튼을 선택합니다.
2. 아래 <소스코드> 버튼을 선택합니다.
3. 소스코드 아래 옵션 값 중 <이전 소스 코드 사용> 을 체크합니다.
4. 화면 크기를 선택 또는 입력합니다.


<소스 코드> 버튼을 선택하면 기본적으로 iframe 소스코드가 생성이 되는데 iframe 은 악의적인 사용이 가능한 경우가 많아 우리나라 사이트들에선 막아둔 곳이 많죠. ^^ 그래서 <이전 소스 코드 사용> 을 선택해 object 소스코드를 생성합니다.

5. 생성된 소스코드를 모두 선택하여 메모장 같은 곳에 복사하여 필요한 부분만 빼고 삭제하겠습니다. 우리는 <embed> 소스만 필요합니다. ^^ 아래 소스에서 붉은색으로 칠해진 곳이죠. 

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

6. 복사한 <embed> 소스코드 중 src=" " 부분에 &autoplay=1 를 넣어주면 자동재생 소스가 됩니다.

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

간단하죠? ^^ 아래는 원본 동영상과 자동재생 적용된 동영상입니다. 폴딩 된 부분 누르세요. ^^

<원본 동영상>




 
  특정 위치 재생 만들기

동영상 길이가 길거나 보여주고자 하는 부분부터 시작하고 싶은 경우 <자동재생> 과 동일한 방법으로 &start=재생위치(초로 환산한 재생시간) 로 사용하면 됩니다.

<embed src="http://www.youtube.com/v/X6XXia5B2Wg?version=3&amp;hl=ko_KR&amp;rel=0&start=67" type="application/x-shockwave-flash" width="735" height="404" allowscriptaccess="always" allowfullscreen="true"></embed>

적용된 동영상은 아래 폴딩을 누르시면 확인 가능합니다. ^^

 
  메뉴바 숨기기

보통 <자동재생>의 경우 메뉴바 숨기기까지 적용해서 많이들 사용합니다. 마찬가지로 &autohide=1 를 소스에 추가해줍니다.

<embed src="http://www.youtube.com/v/X6XXia5B2Wg?version=3&amp;hl=ko_KR&amp;rel=0&autohide=1" type="application/x-shockwave-flash" width="735" height="404" allowscriptaccess="always" allowfullscreen="true"></embed>

적용된 동영상은 아래 폴딩을 누르시면 확인 가능합니다. ^^


 
  자동재생 + 특정위치재생 + 메뉴바숨기기

위 소개한 방법은 중복 적용 가능합니다. 아래와 같이 사용하면 됩니다.

<embed src="http://www.youtube.com/v/X6XXia5B2Wg?version=3&amp;hl=ko_KR&amp;rel=0&autoplay=1&start=67&autohide=1" type="application/x-shockwave-flash" width="735" height="404" allowscriptaccess="always" allowfullscreen="true"></embed>

적용된 동영상은 아래 폴딩을 누르시면 확인 가능합니다. ^^


유투브 동영상 컨트롤 중 자주 사용하는 태그에 대해서 소개해봤습니다.
다음번에는 다음팟이나 비메오 같은 다른 UCC 사이트에서도 사용 가능한 방법에 대해서 소개해 보겠습니다.
방법은 비슷하니 응용해보셔도 되겠네요. ^^