유투브! 왜 아이프레임(iframe)코드를 사용하는가?

유투브 동영상 삽입을 위한 아이프레임 사용의 필요성!

(아래 내용은 유투브 동영상 퍼오기/퍼가기/올리는 2가지 방법/블로그에 유투브 동영상 올리기 /유투브 동영상을 올리는 방법/카페에 유투브 동영상 올리기에 대한 제대로 된 해답을 얻을 수 있을 것입니다)

유투브 동영상은 블로그뿐만 아니라 수많은 웹사이트에서 삽입 되어 이용되고 있습니다. 유투브 동영상을 공유하는 방법은 크게 URL을 복사해서 링크 거는 방법과 소스코드를 이용한 직접적인 삽입 방법이 있습니다. 대부분은 후자의 방법을 사용합니다. 소스코드를 삽입하는 방법은 최근에 유투브가 iframe을 새롭게 지원하게 되었습니다. 아래는 이에 대해 다루어 보기로 합니다.


의외로 많은 분들이 유투브의 iframe방식에 대해서 단순히 소스코드 방식이 바뀌었구나 하고 단순하게 생각들 하십니다. 유투브가 iframe을 사용하는 데는 그 이유가 있습니다. 먼저 두가지 소스코드 중 원하는 소스코드를 가져오는 방법에 대해서 알아보겠습니다. 이건 아주 간단합니다. 유투브는 기본으로 iframe방식을 제공하고 하단에 "이전 소스 코드 사용"을 선택하면 기존 코드 방식을 가져올 수 있어요!

새로운 방식인 iframe코드방식

이전 object 코드 방식

아이프레임(iframe) 코드를 사용해야하는 이유는?

아이프레임을 사용하게 되면 유투브동영상이 삽입된 페이지를 보는 사람들의 컴퓨터 환경에 따라서 플래시 또는 HTML5로 볼 수 있기 때문입니다. 플래시플레이어가 깔려있지 않으면 HTML5로 볼 수 있습니다. 이는 특히 아이폰이나 아이패드 처럼 플래시가 가능하지 않는 모바일기기에 아주 유용합니다. 즉, 어도비 플래시플레이어(Adobe Flash Player)가 없어도 유투브 동영상을 볼 수 있다는 의미입니다. 점점 더 모바일 트레픽이 늘어나는 환경에 대비하고 또한 어도비 플레이어가 설치되어 있지 않은 기기를 위한 대안이라고 보시면 될 것입니다.

※ 아이프레임을 사용하지 않았을 경우의 유투브 동영상은 아래 그림처럼 아예 나오지 않거나 첫화면과 같은 정지화면만 나옵니다.

□ 이전 방식의 코드를 사용한 경우

 ※ 티스토리의 경우 아이프레임(iframe) 코드를 사용하지 않더라도 모바일 페이지에서는 유투브 동영상을 정상적으로 볼 수 있습니다. (PC버전으로 보면 위의 이미지처럼 유투브동영상을 정상적으로 볼 수 없게 됨)

저의 블로그에도 모바일 접속 비율이 어떨 때에는 데스크탑 접속의 3분의1 가까이 나옵니다. 또한 이러한 접속 비율이 점점 더 커지고 있다는 것입니다. 다행히 티스토리처럼 모바일 웹페이지를 지원하는 경우엔 별 문제가 없지만 그렇지 않은 경우엔 반드시 iframe 코드를 이용한 유투브 동영상 삽입이 필요하다고 봅니다.