"다른 사람들은 글 속에 유튜브 영상을 잘만 넣던데 저는 왜 유튜브 영상이 안 올라가고 복사해온 코드만 출력이 되는 건가요?"


자신이 활동하는 커뮤니티에서 유튜브의 동영상이 포함된 글을 쓰려고 합니다. 하지만 웬걸? 내 블로그에선 잘 보이던 동영상이 해당 커뮤니티에선 HTML 태그 상태로만 표시가 됩니다. 분명히 다시 봐도 똑같은 동영상인데 블로그에서는 되고 커뮤니티에서는 안 되네요. 이건 어찌된 영문일까요?

왜 동영상이 안 올라가는 것일까?



일단 결론부터 말씀을 드리자면 유튜브의 동영상을 공유하는 방식이 초기와는 조금 다르게 바뀌었습니다. 그에 따라 대다수의 커뮤니티에선 유튜브의 동영상을 넣기 위해 예전의 방식을 선택하여 가져와야 합니다. 그걸 이야기해보도록 하죠.




새로운 동영상 가져오기 방식 왜 안 될까?

이유는 간단합니다. 대다수의 커뮤니티 게시판에서는 유튜브의 새로운 동영상 공유 방식인 <iframe> 태그의 사용이 금지되어 있기 때문입니다.

거의 모든 커뮤니티가 금지로 설정한 iframe 태그를 사용하는 유튜브의 새로운 동영상 공유 코드



주인장 혼자 글을 쓰는 블로그에서는 그렇지 않지만 다수에게 열려 있는 커뮤니티 게시판에서는 <iframe> 태그의 악용 소지가 너무 크죠. 글을 열었더니 사람들을 전혀 엉뚱한 곳으로 보낸다던지 성인 사이트를 연다던지 뭐 그런 악용의 용도로 <iframe> 태그가 많이 사용되었고 그로 인해 거의 대다수의 커뮤니티 게시판에선 <iframe> 태그를 사용할 수 없게 막아 놓았습니다.

이러한 상황 속에서 유튜브가 새롭게 <iframe> 태그를 기본 공유 코드로 사용하면서 그로 인해 커뮤니티 게시판에선 동영상이 제대로 표시되지 않고 복사해온 태그가 그대로 노출되는 현상이 발생하게 된 것입니다. 즉, 글의 시작에서 보았던 질문과 같이 블로그에선 잘 되던게 다른 커뮤니티에선 갑자기 안 되는 현상이 발생하였고 많은 분들을 당황하게 만들었죠.

아무튼 이러한 이유로 커뮤니티 게시판에선 유튜브의 동영상을 올리기 위해 <iframe> 을 사용하는 새로운 공유 방식이 아닌 <object><embed> 태그를 사용하는 이전 소스 코드를 통해 동영상을 가져와야 합니다.




이전 소스 코드로 동영상 가져오기

핵심은 아래와 같습니다.

유튜브의 동영상을 일반적인 커뮤니티 게시판에서 사용하기 위해선 동영상 소스 코드로 <iframe> 이 아닌 <object><embed> 로 구성된 이전 소스 코드를 사용해야 한다.


이것만 기억을 하시고 이제 가져올 동영상이 있는 유튜브 페이지로 이동합니다. 그런 후 공유의 소스 코드 옵션에서 이전 소스 코드 사용을 체크합니다. 그럼 소스 코드가 바뀌는데 그렇게 바뀐 소스 코드를 복사하시면 됩니다.



그리고 커뮤니티에 그렇게 가져온 이전 소스 코드를 사용하여 동영상이 포함된 글을 작성하시면 됩니다.



간단하죠? 아래는 포스팅에서와 같은 방식으로 가져와본 유튜브 동영상 입니다.







추가 정보 1 - 간단하게 유튜브 동영상 가져오기

자주 가던 커뮤니티에 다른 분들께도 소개하고 싶은 유튜브 동영상이 올라왔나요? 그럼 동영상을 마우스 오른쪽 버튼으로 클릭하시고 Copy embed html 을 선택하시면 바로 이전 소스 코드가 클립 보드로 복사됩니다. 그걸 그대로 사용하시면 됩니다.






추가 정보 2 - 동영상 가운데 정렬하기

동영상을 글 속에서 가운데로 정렬하고 싶다면 여러가지 방법이 있겠지만 가장 간단하게 한다면 <div> 박스 태그로 동영상 소스 코드 전체를 묶어주시고 스타일 시트로 text-align: center 값을 주시면 됩니다. 아래와 같이 말이죠.

<div style="text-align: center;">
<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/XIPlqEcfyhg&hl=en_US&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/XIPlqEcfyhg&hl=en_US&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed></object>
</div>





추가 정보 3 - <iframe> 이 뭔데 커뮤니티에서 금지시키나요?

인라인 프레임이라는 것으로 다른 페이지를 현재 페이지에 바로 삽입하는 태그입니다. 그러니까 제가 마음만 먹으면 악의를 가진 페이지나 사이트를 연결시켜서 여러분을 전혀 엉뚱한 곳으로 보내버릴 수도 있고 여러가지 장난을 칠 수도 있습니다. 그래서 다수가 함께 사용하는 공개된 커뮤니티 게시판에선 누가 언제 그러한 장난을 칠지 모르니 사고를 방지하기 위해 <iframe> 태그를 금지 태그로 사용하지 못하게 막아놓는 것입니다.

블로그는 주인장 혼자 글을 쓰니 굳이 그럴 필요가 없어서 막지 않는 것이구요. 그런데 블로그 주인의 정신 상태가 평범하지 않다면?




추가 정보 4 - 그럼 왜 유튜브는 <iframe> 을 사용하나요?

간단하게 이야기해서 다양화된 기기의 환경에 모두 대응하기 위해서입니다. 기존까지는 동영상을 본다면 응당 PC 에서 접속을 하여 보는게 전부라고 할 수 있었죠. 하지만 시대가 바뀌었고 스마트폰이 새로운 환경으로 급부상을 하게 됩니다.

문제는 기존의 코드로는 스마트폰에서 동영상을 제대로 표현할 수 없다는 겁니다.(플래시를 지원 안 하죠.) 그래서 스마트폰에서 동영상을 보려면 PC 와는 다른 방식으로 동영상을 재생해야 하죠. 이것을 해결하는 방법은 간단합니다. 동영상을 보는 사람의 환경이 PC 라면 PC 에 맞는 코드로 재생을, 스마트폰이라면 스마트폰에 맞는 코드로 재생을 하게 만들면 됩니다.


근데 이러한 기능을 구현하려면 사이트나 블로그를 제작한 프로그래머가 말한 것과 같이 작동하도록 기능을 새로 만들어야 합니다. 하나의 사이트라면 문제가 없는데 실제론 전세계의 모든 사이트나 블로그의 제작자가 이짓을 해야 한다는 거죠. 이게 언제 완료될까요? 이러면 구글에게도 안 좋죠. 얼른 사람들이 스마트폰에서도 아무런 문제없이 자신들의 동영상을 보고 그렇게 광고를 시청해서 돈을 벌어야 하는데 말이죠. 그래서 구글이 말했습니다.

"시간도 없고 힘들지? 우리가 그런 기능을 하는 페이지를 만들고 그 페이지를 <iframe> 으로 바로 가져갈 수 있게 만들테니 너희들은 앞으론 그거 써! 그럼 너희는 복잡하게 기존의 사이트나 블로그를 바꾸지 않고 지금 그대로 사용해도 바로 PC 나 스마트폰 가리지 않고 동영상이 정상적으로 재생될꺼야. 어때? 고맙지? 우리 너무 착한듯 ^^*"

그렇게 된 겁니다. 뭐 실제로 구글이 착해서 그런 건 아니고 자신들의 수익을 유지시키기 위한 최선의 선택이었다고 할까요? 구글이 Don't be evil 이라는 기업 정신으로 유명하지만 어디까지나 수익을 내야 하는 기업이라는 한계를 벗어나진 않습니다. 텍스트큐브를 안드로메다로 보내버린 싸가지 없는 자식들이거든요. 내가 잊을거 같지?


p.s 어째 포스팅 결말이 이상한 듯 하지만 그건 그냥 기분탓이겠죠.

 

 

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

- 상업적인 용도의 사이트는 대상에서 제외됩니다. -
- 글에는 오류가 있을 수 있고, 추후 수정 또는 재발행될 수 있습니다. -
  1. BlogIcon LiveREX 2011.12.27 21:44 신고  댓글주소  수정/삭제  댓글쓰기
    오랜만에 뵙습니다 ^^
    저도 관련 글 쓰려고 생각중이었는데... 너무 멋진글이네요 ㅎㅎ
    • BlogIcon CApple 2011.12.28 09:47 신고  댓글주소  수정/삭제
      방문 감사합니다. ^^
      렉스님도 비슷한 분야를 다루시다보니 주제가 겹치는 일이 많이 생기네요. ㅎㅎㅎ 렉스님의 글도 기대하겠습니다. ^^
  2. goer 2011.12.28 11:22 신고  댓글주소  수정/삭제  댓글쓰기
    embed와 object 태그를 이용한 xss도 있습니다.
    그래서 관리자급들이 애플리케이션에 접속할때는 embed와 object 태그를 필터링해 화면에 보여주지 않는 방법을 쓰죠.
    단순히 플래시동영상을 보는 것만으로도 접속한 사람의 세션을 훔쳐내 애플리케이션 내 같은 권한을 가지게 되죠.
    • BlogIcon CApple 2011.12.28 11:53 신고  댓글주소  수정/삭제
      그래서 XE 의 경우 관리자 권한으로 접속했을 때에는 embed 태그를 필터링하여 재생이 되지 않게 하더군요.

      좋은 정보 감사합니다. ^^
  3. bearpig 2012.01.03 03:23 신고  댓글주소  수정/삭제  댓글쓰기
    허허허 제 질문글이 ^^^^;;;
  4. 이거니 2012.04.03 00:02 신고  댓글주소  수정/삭제  댓글쓰기
    어..잘모르고있었던 좋은 정보네요..
  5. BlogIcon exciting & Great day 2013.01.28 09:45 신고  댓글주소  수정/삭제  댓글쓰기
    유익한 정보 감사합니다.
    여러가지 도움이 많이 되었습니다.
    다음에도 유익하고 좋은 정보 부탁 드립니다.
  6. 안드로메다.. 2013.09.23 10:34 신고  댓글주소  수정/삭제  댓글쓰기
    안드로메다.ㅋㅋ보낸..
    태터 망하게했나요...구글 재수없죠...ㅅ람들은 모르지만...사악해 지자 남들모르게..
  7. 술래잡기 2014.07.06 12:02 신고  댓글주소  수정/삭제  댓글쓰기
    유익한 정보 감사합니다.
    정말 정말 감사합니다
    다음에도 유익하고 좋은 정보 부탁 드립니다.

댓글을 달아 주세요

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

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

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