[CSS] 유튜브 동영상을 반응형 웹에 넣는 방법은?

[CSS] 유튜브 동영상을 반응형 웹에 넣는 방법은?

개인적으로 근무하는 곳 홈페이지를 개편 하기 위해 html과 css를 다시 정리하고 있습니다. 궁금한 내용들을 인터넷으로 검색하면서 정리하는 내용들을 이 곳에 함께 정리하려고 합니다. 검색해서 오신 분들에게는 좋은 정보를 제공하고, 저 자신에게는 다음에 참고할 자료를 정리하는 의미로 기록을 남깁니다. 누군가에게 조금이나마 도움이 되었으면 좋겠습니다.

1. 무엇이 문제인가?

수정하려는 웹페이지에 유튜브 동영상을 iframe을 이용하여 링크하려고 했습니다. 그런데 반응형 웹 스타일로 적용을 하려니 작은(?) 문제점에 봉착하게 되었습니다. 유튜브 동영상 소스가 반응형이 아니다보니 반응형 웹디자인에 유튜브 영상을 넣었을 때, 웹브라우저의 가로 크기가 줄어들면 영상이 잘리게 됩니다.

내 소중한 영상이 잘리다닛!! (클릭하지 마요! 사진이에요!)

유튜브 영상은 보통 다음과 같은 코드 형태로 링크를 걸 수 있습니다.

<iframe width="853" height="480" src=".........." frameborder="0" allowfullscreen></iframe>

[시도1]

그래서 나름대로 머리를 굴려 본다고 코드를 아래와 같이 고쳐보았죠.

<iframe width="100%" src=".........." frameborder="0" allowfullscreen></iframe>

그랬더니....

시도는 좋았으나.... (이것도 사진)

시도는 좋았으나, 영상의 세로 길이가 이상해지네요... ㅡㅡ;;

[시도2]

그래서 

<iframe width="100%" height="100%" src=".........." frameborder="0" allowfullscreen></iframe>

라고도 고쳐보았지만, 별로 달라지는 것이 없었더라는....

[시도3]

혹시나 해서 <iframe>의 사이즈 항목을 모두 지워봤더니...

<iframe src=".........." frameborder="0" allowfullscreen></iframe>

역시나 실패....(이제 사진이란거 알겠죠?)

바...방법이 없을까?

2. 유튜브 동영상을 반응형 웹이 넣는 방법이 있을까?

새로운 아이디어가 필요했습니다. <div>로 <iframe>을 가둬(?)보면 뭔가 방법이 나오지 않을까요? 도전해봅시다!

[시도4]

<div style="width:100%; height:100%;">

<iframe width="100%" height="100%" src=".........." frameborder="0" allowfullscreen></iframe>

</div>

<div>를 이용해서 가로 100%, 세로 100%로 가두고, <iframe>역시 가로, 세로 100%로 설정을 해 보았습니다. 결과는?

뭔가 실패라고 하기엔 아까보다 나아진 것 같고, 성공이라고 하기엔 뭔가 부족해보인다... (아직 사진임..)

이렇게 했더니 영상이 어느 정도 화면에 다 보이기는 하는 것 같은데, 문제가 한 가지 더 있네요! 가로, 세로 비율이 일정치 않게 조정이 되네요...

이제 마지막 해결책은?!! 바로 position 옵션을 이용해보겠습니다. 바로 relative와 absolute인데요... 코드를 다음과 같이 입력해보겠습니다.

[시도5]

<div style="width:100%; position:relative; padding-bottom: 56.25%;">

<iframe width="100%" height="100%" style="position:absolute;" src=".........." frameborder="0" allowfullscreen></iframe>

</div>

<div>에는 position에 relative 옵션을, padding-bottom에 56.25%를 넣어주었습니다. 가로 길이를 100%로 하고, 내부 아래쪽 여백을 56.25%로 박스를 만든 겁니다. 56.25%의 비밀은 무엇일까요? 이것은 영상의 가로와 세로 비율을 계산한 것입니다. 예를 들어 영상의 가로 크기가 640px, 세로 크기가 360px라면

360(px) / 640(px) = 0.5625

가 나옵니다. ^^;

그리고 <iframe>에는 가로, 세로 크기를 100%로 주고, position에 absolute 옵션을 주었습니다. absolute는 조상 엘리먼트에 상대적으로 위치가 지정되기 때문에 현재 <div>로 그려진 박스에 가득차는 형태로 <iframe>이 그려질 것입니다.

대략 이런 식일까요?

결과는?

드디어 성공? (아직까지도 사진....)

드디어! 원하는 결과가 나왔습니다. 적당히 브라우저 창을 움직여봐도 나름 잘 조정되는 것 같습니다^^

3. (결론) 조금 더 깔끔하게 수정해봅시다. CSS를 이용하자!

앞서 만든 코드는 웹 표준적인 요소가 약간 어긋나 보입니다. html과 css를 이용하여 코드를 수정해봅시다.

[html]

<div class="youtube">

<iframe src=".........." frameborder="0" allowfullscreen></iframe>

</div>

[CSS]

.youtube {

  position: relative;

  width: 100%;

  padding-bottom: 56.25%;

}

.youtube iframe {

  position: absolute;

  width: 100%;

  height: 100%;

}

조금 더 깔끔해 보이죠?

유튜브 동영상을 반응형 스타일의 웹이 넣으실 때, 이렇게 사용해보면 좋을 것 같습니다^^ CSS 스타일을 사용하기 어려우실 때엔 [시도5]번 코드를 사용하는 것도 임시적인 해결책이 될 수 있을 것 같습니다.

4. (테스트) 정말 되나?

이 영상이 제대로 나온다면 성공! [시도5] 방식으로 첨부해 보았습니다. 브라우저 사이즈를 조절해보세요~ (이거 영상이니 클릭하면 재생 되요~)

도움받은 곳 : 감사합니다

• 반응형 웹디자인에 유튜브 동영상 넣는 방법 (http://www.cmsfactory.net/node/11095)
• CSS 레이아웃을 배웁시다, position편 (http://ko.learnlayout.com/position.html)