(Youtube) iframe 지원하지 않는 사이트에서 최대한 포맷 유지하기

유튜브 영상을 글에 끼워넣을 때, 가끔 기글하드웨어나 기글하드웨어나 기글하드웨어같은 사이트들은 iframe을 적대시하여 태그를 막습니다. 이따금 시도되는 iframe을 이용한 피싱이나 해킹을 막겠다는 취지죠.

Youtube가 영상을 끼워넣는 데 iframe을 이용하는 이유는, 종전에는 Adobe Flash만으로 충분했지만 이제 Flash를 지원하지 않는 모바일 기기들의 시장 점유율이 커지고, 그에 따라 Flash가 아닌 다른 방법으로 영상을 끼울 방법이 필요했기 때문입니다. iframe을 이용한 방법은 Flash와 HTML5 표준 방법 모두를 사용할 수 있기 때문에 브라우저에서 둘 중 하나만 지원한다면 영상을 마음껏 볼 수 있습니다.

iframe을 막으면 무슨 일이 생길까요? 이런 사이트들은 Youtube의 공유 옵션에서 ‘이전 코드 사용(Use old embed code)’ 옵션을 체크하길 권장합니다. 이렇게 하면 이전 방식으로 Flash만 사용하여 영상을 끼워넣게 되며, Flash를 지원하지 않는 기기에서는 HTML5를 지원하는데도 Youtube 영상을 제대로 볼 수 없게 되겠죠. 그냥 그 유명한! 엑박이 나타나게 됩니다.

image
바로! 이렇게! 말이죠!
(밐밐!!!)

iframe을 막으면 정말 이렇게밖에는 Youtube 영상을 끼워넣을 수 없는 걸까요? 해결책이 있습니다! 다음 코드를 봐 주시기 바랍니다.

<iframe width="560" height="315"
src="http://www.youtube.com/embed/LxZPaSzQM70" frameborder="0"
allowfullscreen></iframe>

이는 youtube에서 아무 옵션도 체크하지 않았을 때 제공되는, iframe을 이용한 영상 끼워넣기 방식입니다. 이제 다음 코드를 봐 주시기 바랍니다.

<object width="560" height="315" data="http://www.youtube.com/embed/LxZPaSzQM70" allowFullScreen></object>
(object는 보통 패러미터를 저렇게 안 주지만 붙여도 떼도 구현에 차이가 없었으므로 그냥 편하게 원래 모양을 유지하겠습니다. 원래는 구형 Firefox에서 필요했다고 합니다.)

위 코드와 비슷하지만 약간 다른 코드죠? 이 코드는 iframe 대신 object 태그를 사용합니다. iframe 코드와는 기능에 무슨 차이가 있을까요? iframe은 HTML 페이지 안에서 또 다른 HTML 페이지를 in-line으로 표현할 수 있게 만들어졌지만, object 태그는 HTML 페이지 외에도 Flash 등 다른 것들을 쓸 수 있게 만들어졌습니다. 한 마디로, 좀더 범용적인 코드라 하겠습니다.

바꾸는 법은, 보시다시피 iframe 글자를 object로 바꾸어 주고, src를 data로 바꾸어 주시면, 모든 게 끝나죠. 결론적으로, 저렇게 코드를 일부 바꾸어 주시면 iframe을 막은 사이트에서도 youtube를 끼워넣은 뒤 Flash를 지원하지 않는 기기에서 마음껏 영상을 볼 수 있게 됩니다. 이 방식은 Internet Explorer, Firefox, Chrome에서 모두 작동하므로 자유롭게 쓰시면 됩니다.

어차피 object로 쓸 수 있는데 왜 굳이 iframe을 막냐고요? 그거야 뭐… 저도 잘 모릅니다. 주로 누군가 악용할 때 iframe을 쓰지 object는 잘 안 쓰나 보더군요. 이를 막을 수 있도록 ‘sandbox’ 형태의 iframe을 쓸 수 있도록 표준안이 나왔습니다만 아직까지 브라우저에서 지원이 잘 안 되는 상태입니다.

읽어주셔서 감사합니다! ^-^

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중