[HTML/CSS] 유튜브 반응형으로 삽입하기 – Responsive Youtube(iframe) embed

개요

iframe을 CSS로 다루는 것은 까다롭고 기분이 좋지 못하다. 마음대로 안되므로. ^^…
youtube들을 모아놓은 반응형 홈페이지를 만들고 있는데, 그 youtube를 반응형으로 삽입하려면 약간의 CSS 꼼수가 필요하다

HOW TO

HTML

<div class="video-container">
    
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe을 video-container로 감싸주고, 그 안의 iframe을 relative/absolute로 조정해준다.
이 클래스는 그대로 두고, 다른 특성들을 쓰고 싶다면 독립된 곳에서 쓰도록 하자. 괜히 꼬이지 않게.

내 경우는 특이하게 .video-container의 padding-top을 0px로 해야 비디오가 화면에 검정 여백 없이 꽉 차게 나왔다.

유튜브가 얼마 전부터 반응형을 조금씩 지원하기에, 앞으론 이런 꼼수를 안써도 되는 날이 머지 않은 것 같당!

+추가

이것도 잘 된당

.container {
float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 60%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
}
Advertisements

Youtube Thumbnail 가져오기 & 16:9비율로 크롭하기

개요

한 화면에 유튜브 이미지+링크를 많이 모아놓은 사이트를 개발하고 있는데,  이를 모두 iframe으로 embed하는 것은 낭비이기에 thumbnail만 가져오는 방법을 찾아보았다.

썸네일 가져오기

<img src="http://img.youtube.com/vi/JnxwbY07jmY/0.jpg"/>

일단 이렇게 하면 썸네일이 나온다.
하지만 이런 식으로 6:4비율로 검정 background가 포함되어 나온다.

썸네일 크롭하기

이 링크를 보고 따라했다.

<div class="crop"><a href="#" title=""><img src="http://img.youtube.com/vi/JnxwbY07jmY/0.jpg"/></a></div>
div.video {
        width: 100%;
        img{
            border:none;
            height:200px;
        }
        .crop{
            float:left;
            margin:.5em 10px .5em 0;
            overflow:hidden;  this is important
            border:0px solid #ccc;
            }
        /* input values to crop the image */
        .crop img{
            margin:-25px -0px -25px 0px;
        }
    }

img를 crop으로 감싸 요리 죠리 이동하고 자르는 방법이다.
하지만 예쁘고 깔끔하지 못해서 조금 더 찾아봤다.

그냥 16:9로 가져오기

<img src="http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg">
<img src="http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg">

그냥 이렇게 하면 된다…
스택오버플로우를 참고하였다.
위는 320×180, 아래는 (가능하면)1500×900를 준다.


이런식으로.