유튜브 - IFRAME 공유 소스를 EMBED 공유 소스로 바꾸는 방법, 동영상 재생 설정하기
캐플님 홈에 유투브 동영상 강좌가 있는건 몰랐네요
이번에 유튜브가 사이트 개편을 했더군요. 유튜브가 개편되면서 가장 크게 바뀐 부분이 바로 IFRAME 공유 소스만 제공되고, 이전 방식인 EMBED 공유 소스는 더이상 제공하지 않게 바뀌었다는 것입니다. 하지만 대부분의 커뮤니티는 IFRAME 태그가 금지 태그로 설정되어 있습니다. 그리하여 현재 커뮤니티 사이트에서 유튜브 동영상을 제대로 올리지 못하는 문제가 발생하고 있습니다.
하지만 현재 EMBED 방식의 동영상 재생 기능이 완전히 막힌 것은 아니기 때문에, 여전히 예전 EMBED 형태의 소스 코드를 사용할 수 있습니다. 물론 언젠가는 이마저도 막힐지 모르겠지만, 이미 EMBED 방식으로 퍼진 동영상이 상당히 많기 때문에, 당장은 구글측에서도 EMBED 소스 코드를 막지는 않을 것으로 보입니다.
아무튼 이러한 EMBED 소스 코드는 유튜브의 동영상 고유주소와 이를 공유하는 각 소스들의 구조를 알면 만들어내는 것은 매우 쉽기 때문에 이번 글에서는 그것에 대해서 알아보도록 하겠습니다.
1. 유튜브 동영상 소스 코드의 기본 구조
유튜브 동영상은 기존의 이전 소스 코드 방식까지 포함하여 아래와 같은 세 가지 구조의 소스 코드를 가지고 있습니다.
B. IFRAME 소스 코드
C. EMBED 소스 코드
세 가지 방식 모두 고유주소는 동일합니다. 즉, 한 소스 코드에서 해당 동영상의 고유주소만 확인하면, 그대로 다른 방식의 기본 소스 코드에 고유주소를 붙여넣는 것만으로 해당 방식의 소스 코드가 완성되는 것이죠. 간단하죠? 이를 통해 IFRAME 이든 EMBED 든 원하는 소스 코드를 직접 만들 수 있습니다.
유튜브 동영상의 고유주소는 현재 유튜브의 공유 기능 중 동영상 공유에서도 확인할 수 있고, 소스 코드(IFRAME)에서도 확인할 수 있습니다. 이 외에 해당 동영상 페이지의 URL 에도 고유주소가 포함되어 있죠. 어디에서든 고유주소만 확인하시면 됩니다.
참고로 이 때 우리가 만드려는 EMBED 소스 코드는 가로 너비(width)와 세로 높이(height)를 포함하여야 하기 때문에, 동영상 공유에서 간단하게 고유주소를 가져오고, 이후 소스 코드에서 width, height 값을 추가로 확인하는 것이 좋습니다. 뭐 이렇게만 하고 끝내도 좋겠지만, 고화질 재생이나 자동 재생 등을 원하시는 분들도 계실 테니, 해당 소스 코드를 만드는 방법도 알려드리도록 하겠습니다.
2. 유튜브 동영상 재생 옵션 설정하기
일단 유튜브 동영상 재생의 기본적인 옵션들은 아래와 같으며, 사용법은 고유주소 뒤에 원하는 옵션들을 그대로 이어붙이면 됩니다. [동영상 반복 재생 옵션은 따로 설명이 필요하기 때문에 뒤에서 설명합니다.]
동영상의 재생 화질을 설정합니다. 단! 동영상이 해당 화질을 지원해야 합니다. 생략하면 기본 360p(medium) 으로 재생합니다.
| 240p 화질로 재생 | &vq=light |
| 360p 화질로 재생 | &vq=medium |
| 480p 화질로 재생 | &vq=large |
| 720p 화질로 재생 | &vq=hd720 |
| 1080p 화질로 재생 | &vq=hd1080 |
▶ 동영상 자동 재생 여부 설정
사용자가 재생 버튼을 클릭하지 않아도 동영상을 자동으로 재생할지의 여부를 설정합니다. 생략하면 재생하지 않습니다.
| 동영상 자동 재생 | &autoplay=1 |
| 동영상 수동 재생 | &autoplay=0 |
▶ 동영상 시작 지점 설정
동영상을 몇초 지점부터 재생할 것인지를 설정합니다. 생략하면 처음부터 재생합니다.
| 시작 지점 설정(단위 초) | &start=300 |
▶ 동영상 재생 완료 후 추천 동영상 표시 설정
동영상이 끝난 후 추천 동영상을 표시할 것인지의 여부를 설정합니다. 생략하면 표시합니다.
| 추천 동영상 표시 | &rel=1 |
| 추천 동영상 표시하지 않음 | &rel=0 |
만약에 동영상을 720p 화질로 1분 지점부터, 자동으로 재생하고, 추천 동영상을 표시하지 않으려면 아래와 같이 코드를 작성하면 되는 겁니다. 이 때 각 옵션들의 순서는 상관 없습니다.
EMBED 소스 코드 동영상 옵션 설정
간단하죠? 이러한 재생 옵션 설정은 IFRAME 소스 코드에서도 동일하게 적용할 수 있습니다. 단! EMBED 와 다른 점이라면 가장 처음에 적용하는 옵션만 & 을 ? 으로 바꿔주면 됩니다. 즉, 아래와 같이 하면 되는 것이죠.
IFRAME 소스 코드 동영상 옵션 설정 [처음에 설정하는 옵션만 & 을 ? 으로 바꿔줌]
3. 동영상 가운데 정렬하기
먼저 EMBED 소스 코드 방식의 동영상은 소스 전체를 DIV 박스로 묶은 후 Text-align: Center 스타일을 적용하면 됩니다. 즉 아래와 같이 하면 되는 겁니다.
EMBED 소스 코드 동영상 가운데 정렬
<embed width="640" height="360" src="http://www.youtube.com/v/고유주소" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</div>
하지만 IFRAME 에서는 이러한 정렬이 먹히지 않기 때문에, 아래와 같이 DIV 박스의 크기를 IFRAME 의 크기와 동일하게 맞춰주고 좌우의 여백을 자동으로 설정하는 방식으로 해주어야 합니다.
IFRAME 소스 코드 동영상 가운데 정렬
<iframe width="640" height="360" src="고유주소" frameborder="0" allowfullscreen></iframe>
</div>
이러한 방식으로 EMBED 소스 코드와 IFRAME 소스 코드의 동영상을 가운데로 정렬할 수 있습니다.
4. 동영상 반복 재생
이번 글에서 제공한 EMBED 방식의 기본 소스 코드는 플레이어의 버전을 생략한 것입니다. 현재 유튜브 플레이어의 기본 버전은 ?version=3 이기 때문에 생략할 경우 자동으로 해당 버전이 적용되기 때문에 굳이 넣을 필요가 없는 것이죠. 하지만 해당 플레이어 버전에선 동영상의 반복 재생 기능을 사용할 수 없습니다.
동영상을 반복 재생시키기 위해선 유튜브 플레이어의 버전을 이전 버전인 ?version=2 로 설정해줘야 합니다. 그래서 동영상을 반복 재생시키기 위해선 재생 옵션의 가장 처음에 플레이어의 버전을 2 로 설정한 후, 자동 재생과 반복 재생 옵션을 추가하면 해당 동영상을 무한 반복시킬 수 있습니다.
EMBED 소스 코드 - 자동 재생, 반복 재생
동영상을 반복 재생합니다. 동영상 플레이어 버전이 ?version=2 일 때만 정상 작동합니다.
| 동영상 반복 재생 | &loop=1 |
| 동영상 1 회 재생 | &loop=0 |
'window 강좌' 카테고리의 다른 글
| LAN 구축 및 PC 미디어 공유하기_고양이2님강좌 (0) | 2014.08.03 |
|---|---|
| TV팟 동영상을 윈도우포럼 댓글로 퍼오기 (0) | 2014.08.03 |
| Win교실 - 새로운 방식의 유튜브 동영상을 가운데 정렬하기 - IFRAME - (0) | 2014.08.02 |
| 유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용 (0) | 2014.08.02 |
| 왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 - (0) | 2014.08.02 |
