유튜브 링크 주소의 기본 구조와 소스 코드 변환

이번에 유튜브가 사이트 개편을 했더군요. 유튜브가 개편되면서 가장 크게 바뀐 부분이 바로 IFRAME 공유 소스만 제공되고, 이전 방식인 EMBED 공유 소스는 더이상 제공하지 않게 바뀌었다는 것입니다. 하지만 대부분의 커뮤니티는 IFRAME 태그가 금지 태그로 설정되어 있습니다. 그리하여 현재 커뮤니티 사이트에서 유튜브 동영상을 제대로 올리지 못하는 문제가 발생하고 있습니다.

하지만 현재 EMBED 방식의 동영상 재생 기능이 완전히 막힌 것은 아니기 때문에, 여전히 예전 EMBED 형태의 소스 코드를 사용할 수 있습니다. 물론 언젠가는 이마저도 막힐지 모르겠지만, 이미 EMBED 방식으로 퍼진 동영상이 상당히 많기 때문에, 당장은 구글측에서도 EMBED 소스 코드를 막지는 않을 것으로 보입니다.

아무튼 이러한 EMBED 소스 코드는 유튜브의 동영상 고유주소와 이를 공유하는 각 소스들의 구조를 알면 만들어내는 것은 매우 쉽기 때문에 이번 글에서는 그것에 대해서 알아보도록 하겠습니다.



1. 유튜브 동영상 소스 코드의 기본 구조

유튜브 동영상은 기존의 이전 소스 코드 방식까지 포함하여 아래와 같은 세 가지 구조의 소스 코드를 가지고 있습니다.

A. 동영상 공유 링크
http://youtu.be/고유주소


B. IFRAME 소스 코드
<iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소" frameborder="0" allowfullscreen></iframe>


C. EMBED 소스 코드
<embed width="640" height="360" src="http://www.youtube.com/v/고유주소" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></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 소스 코드 동영상 옵션 설정
<embed width="640" height="360" src="http://www.youtube.com/v/고유주소&vq=hd720&autoplay=1&start=60&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>


간단하죠? 이러한 재생 옵션 설정은 IFRAME 소스 코드에서도 동일하게 적용할 수 있습니다. 단! EMBED 와 다른 점이라면 가장 처음에 적용하는 옵션만 & 을 ? 으로 바꿔주면 됩니다. 즉, 아래와 같이 하면 되는 것이죠.

IFRAME 소스 코드 동영상 옵션 설정 [처음에 설정하는 옵션만 & 을 ? 으로 바꿔줌]
<iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소?vq=hd720&autoplay=1&start=60&rel=0" frameborder="0" allowfullscreen></iframe>




3. 동영상 가운데 정렬하기

먼저 EMBED 소스 코드 방식의 동영상은 소스 전체를 DIV 박스로 묶은 후 Text-align: Center 스타일을 적용하면 됩니다. 즉 아래와 같이 하면 되는 겁니다.

EMBED 소스 코드 동영상 가운데 정렬
<div style="text-align: center;">
<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 소스 코드 동영상 가운데 정렬
<div style="width: 640px; margin: 0px auto;">
<iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소" frameborder="0" allowfullscreen></iframe>
</div>


이러한 방식으로 EMBED 소스 코드와 IFRAME 소스 코드의 동영상을 가운데로 정렬할 수 있습니다.



4. 동영상 반복 재생

이번 글에서 제공한 EMBED 방식의 기본 소스 코드는 플레이어의 버전을 생략한 것입니다. 현재 유튜브 플레이어의 기본 버전은 ?version=3 이기 때문에 생략할 경우 자동으로 해당 버전이 적용되기 때문에 굳이 넣을 필요가 없는 것이죠. 하지만 해당 플레이어 버전에선 동영상의 반복 재생 기능을 사용할 수 없습니다.

동영상을 반복 재생시키기 위해선 유튜브 플레이어의 버전을 이전 버전인 ?version=2 로 설정해줘야 합니다. 그래서 동영상을 반복 재생시키기 위해선 재생 옵션의 가장 처음에 플레이어의 버전을 2 로 설정한 후, 자동 재생과 반복 재생 옵션을 추가하면 해당 동영상을 무한 반복시킬 수 있습니다.

EMBED 소스 코드 - 자동 재생, 반복 재생
<embed width="640" height="360" src="http://www.youtube.com/v/고유주소?version=2&autoplay=1&loop=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>

▶ 동영상 반복 재생 여부 설정(조건부)

동영상을 반복 재생합니다. 동영상 플레이어 버전이 ?version=2 일 때만 정상 작동합니다.

동영상 반복 재생 &loop=1
동영상 1 회 재생 &loop=0


간단하죠?



5. 예제

아래는 오늘 포스팅의 내용을 그대로 적용해본 예제 동영상들입니다. 자동 재생은 예의가 아닌 것 같아 사용하지 않겠습니다. ^^; 만약에 동영상 소스 코드 변환이 필요하다면 아래의 소스를 가져가신 후에 고유 주소 부분만 바꿔주고, 나머지 옵션들만 원하는대로 적절히 설정하시면 될 듯 합니다.

EMBED - 720P 화질, 수동 재생, 처음부터 재생, 추천 동영상 표시하지 않음, 가운데 정렬

<div style="text-align: center;">
<embed width="640" height="360" src="http://www.youtube.com/v/ll39CAovGrg&vq=hd720&autoplay=0&start=0&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</div>


IFRAME - 480p 화질, 수동 재생, 12초 지점부터 재생, 추천 동영상 표시, 가운데 정렬

<div style="width: 640px; margin: 0px auto;">
<iframe width="640" height="360" src="http://www.youtube.com/embed/uMLX2ddR874?vq=large&autoplay=0&start=12&rel=1" frameborder="0" allowfullscreen></iframe>
</div>


참고로 EMBED 방식의 동영상은 오직 PC 에서만 재생이 되며 안드로이드나 아이폰 등에서 재생이 되지 않습니다. 그러니 커뮤니티가 아닌 IFRAME 을 지원하는 블로그 등에서는 굳이 EMBED 방식으로 동영상을 공유할 필요가 없습니다. 이번 글은 여기까지 입니다. ^^

p.s 영웅은 날아다녀야 제맛!

 

 

신고
캐플 블로그에 공개된 글은 반드시 원본 글의 링크를 포함시키는 조건으로 자유롭게 이용하실 수 있습니다.
하지만 블로그의 발전을 위하여 되도록이면 링크로 글을 소개해주시길 부탁드립니다. ^^

- 상업적인 용도의 사이트는 대상에서 제외됩니다. -
- 글에는 오류가 있을 수 있고, 추후 수정 또는 재발행될 수 있습니다. -
  1. 나나 2012.12.19 01:16 신고  댓글주소  수정/삭제  댓글쓰기
    유튜브가 새로 개편할 때 제일 욕먹는 단점 중 하나가 위에서 언급한 EMBED 코드 삭제와 동영상을 최신순과 조회순을 정렬하는 옵션이 삭제된 것이지요.

    EMBED 문제는 며칠 후에 와 보니 유튜브 측에서 복구했지만 정렬 옵션은 복구되지 않아서 슬픕니다.
    • BlogIcon CApple 2012.12.19 07:50 신고  댓글주소  수정/삭제
      저도 글을 써놓고 며칠 후 다시 가보니 예전 소스 코드는 복구가 되어 있더군요. 순간 이런 글을 작성한 게 민망해졌지만 그래도 뭐 재생 옵션 등도 함께 정리해뒀으니 남겨두고 있습니다. 개편을 좀 더 신중하게 했었으면 어땠을까 생각합니다.
  2. 초보자 2013.01.03 13:42 신고  댓글주소  수정/삭제  댓글쓰기
    고유주소?version=2&autoplay=1&loop=1
    이 코드에 start와 end 코드를 넣어서 구간반복이 가능할까요?

    예를 들어서 맨오브 스틸 트레일러에 30초에서 35초 사이의 구간만 무한 반복시키게끔 말이에요. (짤방처럼)

    한 1~2년전쯤에는 분명히 구간반복 영상을 커뮤니티에도 짤방처럼 많이 올리곤 했는데
    해보니까 안되더라구요.
    &start=30&end=35
    뭐 이런식으로 했었던걸로 기억하는데 혼자 끙끙대며 해보니
    시작지점은 지정한대로 30초부터 시작하지만 종료지점은 안먹히고
    영상 끝까지 가더군요.
    그리고 다시 30초 부분부터 시작...
  3. 마삼희 2013.01.06 11:11 신고  댓글주소  수정/삭제  댓글쓰기
     
    안녕하세요.
    iframe 태그를 embed 태그로 변환하는 방법을 찾다가 캐플님 블로그에 방문하게 되었습니다.

    놀랍게도 태그변환은 물론 다양한 태그옵션 설명까지 일목요연하게 정리되어 있어서 제가 얻고자 하는 정보 외에도 유용한 내용을 많이 배울 수 있었습니다.
    이렇게 양질의 포스팅을 작성해주신 점에 대해 댓글로나마 감사의 마음을 전하고 싶네요.

    실례가 되지 않는다면, 궁금한 점 두 가지만 여쭙고 싶은데 답변 부탁드리고 싶습니다.

    1. 동영상을 퍼갈 때, 주석효과 없이 깔끔하게 동영상만 재생했으면 하는 바가 종종 있는데요.
    따로 클릭해서 끄지 않고, 재생 시 주석(annotations)을 자동으로 hide 시키는 설정이 있는지 알고 싶습니다.

    2. 저는 영상을 퍼와서 업로드할 때 autohide=1(컨트롤바 숨기기)과 showinfo=0(제목과 업로더 이름 숨기기) 옵션을 매번 삽입하는데요
    유튜브 플레이어 version=3 에서는 굳이 이 태그설정을 넣지 않아도 자동으로 이뤄지는 것인지 알고 싶습니다.
    간혹 유튜브 홈페이지에서 영상을 보면 알아서 컨트롤바가 사라지는 경우가 있어서 최신 플레이어(버전3)에서는 혹시 그러한지 궁금하네요.

    다시 한 번 유용한 정보를 포스팅해주셔서 감사드리고, 앞으로 블로그에 자주 방문해서 좋은 정보 많이 배우고 싶네요.
    그럼 즐겁고 편안한 일요일 보내세요. 감사합니다.
     
    • BlogIcon CApple 2013.01.06 23:49 신고  댓글주소  수정/삭제
      1. 주석 표시 설정

      [code]
      [b]iv_load_policy=1[/b] : 주석 표시
      [b]iv_load_policy=3[/b] : 주석 끄기
      [/code]

      2. Version=3 에서는 자동으로 제목과 컨트롤바가 숨겨집니다. ^^
  4. ⊙♡⊙ 2013.02.19 01:10 신고  댓글주소  수정/삭제  댓글쓰기
    감사합니다 덕분에 잘 쓸 수 있게 됐어요ㅠㅠ..
  5. 카오루 2013.04.09 11:16 신고  댓글주소  수정/삭제  댓글쓰기
    좋은 정보 감사합니다. '이전 소스 코드 사용' 옵션이 없는 영상이 있어서 곤란했는데 큰 도움이 됐습니다.
  6. 질문자 2013.06.14 21:38 신고  댓글주소  수정/삭제  댓글쓰기
    동영상 끝나는 지점 설정은 어떻게 하나요?
  7. 강인혜 2014.03.07 10:13 신고  댓글주소  수정/삭제  댓글쓰기
    저도 잘보고갑니다! 업무에 필요했는데 바로 도움받구 가요! 즐추할께요~
  8. KSH 2015.01.20 14:41 신고  댓글주소  수정/삭제  댓글쓰기
    이야 감사합니다

    정말 깔끔하네요 완벽한글입니다
  9. 2015.05.01 21:07 신고  댓글주소  수정/삭제  댓글쓰기
    완벽한 설명 감사합니다
    퍼가도 되나요?
  10. 2015.05.31 01:02 신고  댓글주소  수정/삭제  댓글쓰기
    [b]좋은정보 잘 모셔서 네이버 블로그에 사용잘하고 있는중에 문재가..
    스마트 폰 에서도 자동반복재생이 되었으면 참좋은데
    영상 마저도 보이지않으니 못내 아쉽내요
    어떤 방법으 없나요..[/b]

    ds1fqq@naver.com
  11. 쪽빛 2015.07.02 01:18 신고  댓글주소  수정/삭제  댓글쓰기
    도움 많이 됐습니다. hd1080으로 자동재생하려 하는데 폰에서 embed가 재생이 안되는 문제가 있어서,iframe 소스에서 hd1080으로 하려했지만... 위의 재생에서도 vq=large로 설정했음에도 불구하고 480으로 재생이 안되는 듯 싶네요, 제가 다른곳에서 해볼때도 그렇고요.. 물론 embed에서는 vq가 제대로 되는데 iframe에서는 vq 설정이 안되는것 같습니다... 해결법이 있을까요?

    misovys@naver.com
  12. 아이스크림 2015.11.06 09:26 신고  댓글주소  수정/삭제  댓글쓰기
    정말 간만에 동영상을 올려보려고 낑낑대다가 님 블로그 발견하고 정말 반가웠습니다
    일목요연하게 정리가 너무 잘되서 정말 도움 많이 됬습니다
    저는 iframe으로 작동을 했는데, 이상하게 자동반복재생이 안먹더라구요
    님이 말씀해주신데로 ?version=2일때 작동한다해서 다 확인 했는데 말이죠 다른건 다 착하게 잘 먹는데 유동 자동재생만.....ㅜㅜ 왜그럴까요?
  13. 예리 2015.12.12 14:40 신고  댓글주소  수정/삭제  댓글쓰기
    참 좋은 블로그군요! 많은 도움이 되었습니다.
  14. 궁금해요 2016.02.21 18:53 신고  댓글주소  수정/삭제  댓글쓰기
    만약에 iframe 자동재생형식으로 게시글을 포탈사이트 카페에 올릴 경우 사람들이 볼때마다 유튜브 조회수도 올라가나요~?? 안올라갈때가 있어서 질문합니다 ㅠㅠ
  15. 질문드립니다. 2016.07.10 13:08 신고  댓글주소  수정/삭제  댓글쓰기
    안녕하세요~
    쥔장님 질문좀 드립니다.
    혹시 유튜브동영 썸네일 우측하단에 동영상길이[타임]나오잖아요 그건 어떻게 해야 표시가 될가요?
    항상 건강하시고 행복하세요 좋은 블로그 "감사합니다"
  16. 김재영 2016.07.17 12:50 신고  댓글주소  수정/삭제  댓글쓰기
    질문들을 드려요 묵묵무답이네요 ㅡ.ㅡ"
  17. 재영아하아... 2017.09.11 15:17 신고  댓글주소  수정/삭제  댓글쓰기
    여기가 니들, 특히 재영이 니따위한테 답변 해줘야 되는 의무를 가진 사람이 복무하는 국가운영사이트냐?
    개념을 진짜 어따 말아먹었는지 어휴 ㅡ.ㅡ"
    그리고 묵묵무답은 뭐야 리얼 엔타로 아둔!!!!!!!!!!!!!!!
  18. tanhoe 2017.10.21 03:20 신고  댓글주소  수정/삭제  댓글쓰기
    안녕하세요, 올려주신 부분이 많은 도움이 되었습니다. "1. 유튜브 동영상 소스 코드의 기본 구조"의 이미지를 저의 블로그에 캡쳐해 올렸는데 괜찮을까요?(만약 원치 않으신다면 해당 이미지는 내리겠습니다.)이미지 하단에 블로그 주소와 이 페이지 주소를 써두었습니다.(제 이메일 주소 - guri639@한메일 점 넷입니다.)
  19. tanhoe 2017.10.21 03:24 신고  댓글주소  수정/삭제  댓글쓰기
    아, 블로그 용도는 일상+게임이야기 하는 다음 블로그입니다.^^;;

댓글을 달아 주세요

- 댓글에선 예의를 지켜주시기 바라며, 블로그지기는 댓글에서 따로 활동하지 않습니다.

* 티스토리 사용자는 여기를 클릭하시면 로그인 됩니다.

BBCode 안내   굵게 밑줄 기울임 취소선   취소선 취소선 취소선 취소선   왼쪽 정렬 가운데 정렬 오른쪽 정렬   코드박스 인용구 이미지   이미지 업로드-Imgur.com