css

CSS로 Youtube 동영상, Google map 반응형 웹페이지에 적용하기 – Flexible iframe

핑계/ editor

  • 0 comments
  • 1,533 views
  • 2017년 9월 2일

반응형 웹페이지에 youtube 동영상, google map 을 적용해보아요~

1. iframe 알아보기


 

– iframe 이란?

HTML 문서 안에 frame(프레임)을 insert(삽입)하는 태그로,
<iframe>요소를 이용하면 해당 웹페이지 안에 어떠한 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있습니다.

<iframe src="삽입할 페이지 주소"></iframe>

 

– Youtube, Google map이 iframe 코드를 사용하는 이유는?

아이프레임을 사용하게 되면 youtube 동영상이 삽입된 페이지를 보는 사람들의 컴퓨터 환경에 따라서 플래시 또는 HTML5로 볼 수 있기 때문입니다.
즉 플래시 플레이어가 깔려있지 않으면 HTML5로 동영상을 볼 수 있다는 말입니다.
이는 특히 아이폰이나 아이패드 처럼 플래시가 가능하지 않는 모바일기기에 아주 유용합니다.
점점 더 모바일 트레픽이 늘어나는 환경에 대비하고 또한 어도비 플레이어가 설치되어 있지 않은 기기를 위한 대안이라고 보시면 될 것입니다.

위 내용은 여기에서 발췌했습니다.

 
 

2. Youtube 동영상 반응형 웹페이지에 적용하기


 

① youtube 동영상 소스 코드 가져오기

youtube.com 에 접속해서 웹페이지에 적용하고 싶은 동영상 ‘소스 코드’ 를 복사합니다.


 

② ‘동영상 소스 코드’ 마크업 해서 웹페이지에 적용하기

복사해온 ‘소스 코드’ 를 HTML 문서내 <div>.container 안에 마크업 해줍니다.
youtube 동영상인 <iframe>을 <div>.container 에 딱 맞게 적용해보도록 하겠습니다.
여기에서는 브라우저창을 늘렸다 줄였다 할수가 없으니, <div>.container 로 브라우저 창을 대신하겠습니다.

<div>.container 는 전체 가로view의 80% 를 차지하는 하늘색 배경입니다.

Markup

<div class="container">
    <iframe src="https://www.youtube.com/embed/PZxPUM4bUzY" 
            width="560" 
            height="315"  
            frameborder="0" 
            allowfullscreen>
    </iframe>
</div>

CSS

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

HTML5AROUND on html5around.com
 

③ <iframe>요소를 <div>.movie 로 감싸주기

<iframe>요소를 <div>.container 에 100% 채우기 위해서 가이드 역활을 해줄 <div>로 다시 한번 감싸줍니다. class는 ‘.movie’로 하겠습니다.

추가 Markup

<div class="container">
    <div class="movie">  // 추가 div
        <iframe src="https://www.youtube.com/embed/PZxPUM4bUzY" 
                width="560" 
                height="315"  
                frameborder="0" 
                allowfullscreen>
        </iframe>
    </div>
</div>

 

④ <iframe>요소를 <div>.container 에 100% 채우기

<img>요소의 가로 세로 비율을 유지하면서 화면 가득 이미지를 채우는 방법처럼
<iframe> 요소에 width: 100%; height: auto; 로 썼는데
<iframe> 요소의 세로길이가 종횡비대로 늘어나지 않은 것을 볼 수 있습니다.

추가 CSS

.container {
    width: 80vw;
    height: 100vh;
    background: #81BEF7;
    margin: 0 auto;
}
.movie {
    position: relative;
    max-width: 100%;
   height: auto;
}
.movie iframe {
   position: absolute;
   width: 100%;
   height: auto;
}

HTML5AROUND on html5around.com
 

⑤ <iframe> CSS 코드 수정하기

<iframe> 요소의 width, height는 <div>.movie 요소의 크기에 맞춰질 예정이기 때문에
width, height 값은 100%로 수정하고, top:0; left:0; 을 추가해줍니다.

<div>.movie 요소의 height 값을 0으로 해줍니다.
.movie 의 height값이 ‘0’ 이기 때문에 youtube 동영상이 지금 화면상에서 사라진 것을 볼 수 있습니다.

추가 CSS

.container {
    width: 80vw;
    height: 100vh;
    background: #81BEF7;
    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;          /* 추가 */
}

HTML5AROUND on html5around.com

<iframe> 요소의 높이를 지정하기 위해서는 padding-top 또는 padding-bottom 을 이용해야 합니다.
단! height: 0; 은 필수입니다.

높이 지정 방법
padding-top 또는 padding-bottom : 높이 ÷ 가로 × 100
 

동영상의 가로세로 비율은 4:3 / 16:9 / 21:9 보통 이렇게 3개 입니다.
아래처럼 CSS코드를 미리 만들어놓고 적용할 요소에 class를 추가해줘도 되고,
css코드에 직접 padding-top값을 써줘도 됩니다.

.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 */

 

⑥ Youtube 동영상 마무리 하기

이번 동영상은 가로세로 비율이 16:9 이므로
.is-16by9 클래스를 <div>.movie 요소에 추가해서 완성하겠습니다.

최종 Markup

<div class="container">
    <div class="movie is-16by9"> // class 추가
        <iframe src="https://www.youtube.com/embed/PZxPUM4bUzY" 
                width="560" 
                height="315"  
                frameborder="0" 
                allowfullscreen>
        </iframe>
    </div>
</div>

최종 CSS

.container {
    width: 80vw;
    height: 100vh;
    background: #81BEF7;
    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 */

HTML5AROUND on html5around.com

.container 의 width 값을 변경해도 youtube 동영상이 종횡비를 유지하면서 크기가 변경되는 것을 확인해보세요~~

 
 

3. Google map 적용하기


 

① Google map 링크 주소 가져오기

Google map에 접속해서 원하는 장소를 검색합니다. 저는 ‘청화대’를 검색하겠습니다.
검색 후 장소가 나오면 아래쪽에 ‘공유’ 버튼을 눌러주세요

팝업이 뜨면서 ‘링크 공유’ 주소가 나오는데 주소를 카피 하지 말고 ‘링크 공유’ 옆에
‘지도 퍼가기’ 탭을 눌러서 나오는 iframe 주소를 카피합니다.



 

② ‘구글맵 주소’ 마크업 해서 웹페이지에 적용하기

위에서 유투브 동영상 했던 방법과 똑같습니다.
이번에는 <div>.map 요소로 iframe 을 감싸겠습니다.
가로세로 비율은 21:9 로 해서 마무리하겠습니다.

Markup

<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>

CSS

.container {
    width: 80vw;
    height: 100vh;
    background: #81BEF7;
    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;          
} 

HTML5AROUND on html5around.com

핑계

댓글 먹고 살아요~

Leave a Reply

avatar