[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)
'컴퓨터 활용 > HTML & CSS' 카테고리의 다른 글
[CSS] div와 span, id와 class는 무엇이 다른가요? (0) | 2015.10.31 |
---|