모든 디바이스에 최적화된 "유튜브동영상" 게시하는 팁

예제 소스 코드

<iframe width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>

위 예제 유튜브 소스 코드는 요즘 화제가 되고 있는 영국 출신 여가수 Adele의 Hello라는

MV입니다.

이처럼 유튜브에서 복사된 소스 코드를 다른 웹 사이트로 퍼 옮길 때 휴대폰 및 태블릿 등

모든 디바이스 기기에서 잘려 나가지 않는 화면으로 재생되게 하려면 간단하게 적용할 수 있습니다.

위 소스 코드를 예로 든다면 가로폭 부분인 <iframe width="560" 픽셀을 <iframe width="100%"로

바꿔 게시하면 유튜브 동영상이 반응형으로 전환되어 디바이스에 따라 화면의 크기 차이는 있을지라도

온전한 유튜브 동영상을 시청할 수 있습니다.

그러나 이 방법은 가로폭에만 유도리(?)융통성을 주었기 때문에 동영상에 따라 세로폭에 여백이 생길 수 있어

모든 디바이스에 최적화된 방법이라고 말할 수 없을 것 같은데요.

Daum 카페 블로그 및 네이버 카페 블로그는 딱히 다른 방법이 보이질 않아 위 방법을 사용해야 겠지만

티스토리 블로그처럼 HTML / CSS 편집이 가능한 웹 사이트는 좀더 최적화된 팁을 사용할 수 있습니다.

티스토리에서 모든 디바이스에 최적화된 유튜브동영상 올리기

티스토리 블로그에서 유튜브 동영상을 삽입하는 방법은 대략 세가지 정도가 있는데요.

플러인 설정으로 넣는 방법과 글쓰기 에디터에서 외부컨텐츠 탭 사용, 또는 글쓰기 HTML 모드에서

직접 삽입하는 방법이 있을 텐데요.

오늘 소개할 팁은 외부컨텐츠 탭 사용과 직접 넣어 주는 방법에 해당된다고 말할 수 있겠네요.

주저리 주저리 설명드리자면... 먼저 아래 코드를 관리자 화면 > HTML/CSS 편집, CSS에 추가합니다.

(알기 쉽게 CSS 맨 하단에 추가해 주면 좋겠지요?)

/* 유튜브 모든 디바이스 적용 */

.youtubeWrap {

  position: relative;

  width: 100%;

  padding-bottom: 56.25%;

}

.youtubeWrap iframe {

  position: absolute;

  width: 100%;

  height: 100%;

}

코드 복사가 안 되는 분은 텍스트 파일을 내려받으세요.css 추가 코드.txt

CSS에 코드를 추가하고 저장 했으면 유튜브 동영상 소스 코드를 본문에 넣고 적용해야 할 텐데요.

유튜브 동영상을 퍼 갈 때 기본 권장 동영상 크기(560x315)에서 추천 동영상 표시를

체크 해제(제 기준)하고 소스 코드를 복사합니다. 그러면 위 예제 소스 코드처럼 복사되는데요.

복사된 예제 소스 코드를 설명하자면... 빨간색 텍스트로 표시된 가로폭과 세로폭은 지워야할 부분이구요.

<iframe width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>

삭제된 가로폭과 세로폭의 소스 코드를 아래와 같이 div 태그로 감싸 준 후...

<div class="youtubeWrap">

<iframe  src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>

</div>

글쓰기에서 HTML 모드로 전환하여 본문에 직접 넣어 주거나, 외부컨텐츠 탭을 열어 소스입력란에 넣어 주면

모든 디바이스에 최적화된 유튜브 동영상으로 재생됩니다.

☞ 예제 동영상 보기

이 글에 도움이 된 원문 출처 블로그