iframe 영역 꽉채워서 나타내기 (유투브, 구글맵)

iframe 을 활용한 유투브, 구글맵을 반응형으로 꽉채우는 방법이다.

# 유투브

 1. html 구조

<div class="container">

<div class="movie is-21by9">

<iframe

width="560"

height="315"

src="https://www.youtube.com/embed/1stxUqNJINE"

frameborder="0"

allow="autoplay; encrypted-media"

allowfullscreen>

</iframe>

</div>

</div>

(영상은 임의로 아무거나 가져온 것이다.)

유투브에 공유하기에서 iframe 으로 가져온 소스이다.

2. css 구조

<style>

html,body{margin:0;padding:0;}

.container{width:80vw;height:100vh;background:grey;margin:0 auto;}

.movie{position:relative;max-width:100%;height:0;overflow: hidden;}

.movie iframe{position:absolute;width:100%;height:100%;top: 0;left: 0;}

.is-4by3 {padding-top: 75%;} /* 3 / 4 * 100 */

.is-16by9 {padding-top: 56.25%;} /* 9 / 16 * 100 */

.is-21by9 {padding-top: 42.857142857%;} /* 9 / 21 * 100 */

</style>

iframe 을 감싸는 .movie 에 height 값을 0으로 준다. position을 relative로 주는 것을 잊지 않는다.

iframe은 absolute 에서 비율에 따라 padding-top 이나 padding-bottom 으로 비율에 맞춰서 영역을 잡아줬다.

3:4 / 9:16 / 21:9 의 비율에 맞춰서 계산하면 된다.

# 구글맵

1. html 구조

<div class="container">

<div class="map">

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.6606614296165!2d126.97261695126926!3d37.58660757969492!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2b7ef94a16b%3A0xb16d5f135eaaddc!2z7LKt7JmA64yA!5e0!3m2!1sko!2skr!4v1492503564571"

width="600"

height="450"

frameborder="0"

style="border:0"

allowfullscreen>

</iframe>

</div>

</div>

구글맵도 iframe 버전으로 가져온다.

2. css 구조

<style>

html,body{margin:0;padding:0;}

.container{width:80vw;height:100vh;background:grey;margin:0 auto;}

.map {

position: relative;

max-width: 100%;

height: 0;

overflow: hidden;

padding-top: 42.857142857%; /* 9 / 21 * 100 */

}

.map iframe {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

</style>

아이프레임 위에 감싸고 있는 .map 에 padding-top을 적절하게 넣어서 영역을 준다.

위에는 21:9로 하였다.