유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기)

유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기)

 

유튜브 동영상 등 iframe 을 웹페이지에 넣을 때 pc버전의 경우 화면 해상도가 커서 문제가 되지 않으나

모바일 웹의 경우 가로, 세로가 고정된 iframe(아이프레임) 을 넣을 경우 프레임이 화면 밖으로 나가는 문제가 생기게 된다.

이럴때 css 설정을 통해 해결이 가능한데, 아래 설명을 따라 하면 된다.

 

유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기)

 

- css 영역 

.mainVideo 클래스를 설정해주고, 속성을 지정해준다. 

.mainVideo 내의 ifrmae(아이프레임) 속성을 설정해주면 해당 태그 내부의 iframe(아이프레임)이 속성을 따라간다.

.mainVideo {
margin-top:20px;
position: relative;
width: 100%;
padding-bottom: 56.25%;
}

.mainVideo iframe {
position: absolute;
width: 100%;
height: 100%;
}

 

 

- 모바일웹 페이지내의 html 코딩 

유튜브 동영상이 들어갈 코드를 mainVideo 라는 클래스로 정해서 div 태그로 둘러싼다. 

 

<div class="mainVideo">
<iframe width="640" height="355" src="https://www.youtube.com/embed/xxxxxxxxx"  allowfullscreen frameborder="0"></iframe>
</div>

 

 

실제 모바일 웹에서 유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기)를 한 결과.

코딩에 들어가있는 width / height 값과 무관하게 정상적으로 나온다. 

유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기) - 실행결과

유튜브 동영상 크기맞추기(모바일에서 iframe 크기 맞추기)