[YouTube] 유투브 소스코드 변환(iframe → embed)과 목록화하는 방법
Posted by on 2015. 8. 24. 11:21
YouTube에 동영상을 올리고 다른 곳으로 퍼가고 싶을 때 Iframe 코드가 생성되어 iFram이 지원되지 않는 곳에서는 작동이 제대로 되지 않는 경우가 있습니다.
이경우 iframe을 embed로 변환하여 올리시면 대부분은 작동이 잘 되는데요.
여기서는 YouTube의 공유 테그인 iframe를 embed 테그로 변환 하는 방법과 플레이 리스트를 만들지 않고 플레이 리스트효과를 내는 방법에 대하여 알아 보겠습니다.
우선 YouTube의 공유 태그에 대하여 살펴 보겠습니다.
먼저 다른곳에 등록하기위하여 공유 태그를 만들기 위해서는 유듀브의 동영상에 마우스를 올리고 우측키를 눌러 실행된 메뉴에서 "소스 코드 복사"를 눌러 주면 ifram 테그를 생성하게 됩니다.
iframe 테그는 아래와 같은 코드를 가지게 됩니다.
주의 깊게 보셔야 할 곳은 YouTube의 URL 부분인데요. iframe 코드용 URL은 embed/VIDEO_ID 형식을 가지고 있습니다.
이 VIDEO_ID는 아래에서 보듯이 동영상에서 "공유"를 클릭하면 나타나는 URL의 뒷 코드 입니다. 그림에서는 파란색 네모로 표시 하였습니다.
이 코드는 동영상 마다 다른 고유 코드 입니다.
EMBED 코드로 변환하기 위해서 우리에게 필요한게 이 VIDEO_ID 입니다.
그러면 embed 태그로 변환하기 위한 기본 코드를 살펴 보겠습니다.
눈치 빠르신 분들은 바로 알아 차리실 텐데요.
iframe 테그에서 embed 태그로 바꿔 주기 위해서 동영상 url 부분에서 embed/VIDEO_ID를 v/VIDEO_ID로 변경만 하면 됩니다.
두개의 코드를 붙여 쓰면 좀더 쉽게 알아 보실 겁니다.
<embed width="560" height="315" src="http://www.youtube.com/v/VIDEO_ID" frameborder="0" allowfullscreen></embed>
참 쉽죠?
그럼 리스트 처리는 어떻게 할까요?
리스트처리는 playlist 코드를 사용합니다.
물론 iframe를 이용한다면 이 유투브에 직접 리스트를 만들고 리스트 공유코드를 복사하면 간단히 만들 수 있습니다.
그런데 playlist 코드를 이용하면 유투브에 리스트를 만들지 않고 리스트처럼 순차적으로 플레이 시킬 수 있습니다.
playlist 코드 이용 방법은 playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4 형식으로 사용합니다.
VIDEO_ID사이에 콤마(,)로 구분합니다.
사용법은아래와 같이 앤드(&)로 붙여 줍니다.
<embed width="560" height="315" src="http://www.youtube.com/v/VIDEO_ID&playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4" frameborder="0" allowfullscreen></embed>
첫번째 플레이시킬 동영상은 VIDEO_ID에 두번째 동영상 부터는 playlist에 콤마(,)로 구분하여 순서대로 VIDEO_ID를 적어 주시면 됩니다.
결과는 아래 그림과 같이 플레이어 하단에 목록 단추가 활성화 되고 목록 단추를 누르면 목록상자가 열립니다.
목록 상자에서는 목록화한 파일들을 확인 할 수 있습니다.
'Tip & Tech > 10원짜리 Tip' 카테고리의 다른 글
| 윈도우에서 안드로이드 어플의 사용을 도와 주는 Koplayer (10) | 2016.02.04 |
|---|---|
| [웹브라우저] 현재 열려있는 모든 탭의 인터넷 주소를 복사하는 방법 (0) | 2015.09.24 |
| 구글 피카사(Picasa)의 스크린 캡처 기능을 비활성화 하는 방법 (0) | 2015.09.13 |
| 만일 MAC address가 같은 컴퓨터가 2대 있다면 어떻게 될까? (0) | 2015.09.12 |
| 파이어폭스(Firefox) 브라우저에서 구글 사이트 접속이 안될 때 (신뢰할 수 없는 사이트 에러) (0) | 2015.08.11 |
| [우편번호] 새 우편번호 검색 사이트와 내 주소의 정확한 영문주소 변환 방법 (0) | 2015.08.01 |
| [WinRAR] 윈라 한글화 파일 (0) | 2015.07.20 |
| [바이두] 더이상 속도를 올릴 방법이 없을듯 합니다. (1) | 2015.07.09 |