유튜브 iframe height 자동 조절

유튜브 iframe height auto 해결 방법

 

유튜브 동영상 iframe을 넣다 보면 가로 세로 값을 정해줘야 하는데

반응형을 위해 width="100%" height="auto"로 할 경우 height 값이 적용되지 않는다.

 

 

구글링을 하다 보면 script로 해결하는 경우가 많은데 내가 원하던 방식이 아니었다.

그러다 아래의 글을 발견했고, 내 코드에 맞게 적용했다. 

 

 

출처

https://avexdesigns.com/responsive-youtube-embed/

Responsive Youtube Embed | Tutorial | Avex Designs

 

 

#인라인 CSS 적용

<div class="video-container" style="text-align:center;position:relative;padding-bottom:56.25%;padding-top:0px;height:0;overflow:hidden;">
	<iframe style="position:absolute;top:0;left:0;width:100%; height:100%;" src="https://www.youtube.com/embed/NuBBLxG01I0?modestbranding=1" frameborder="0" crolling="no" frameborder="none" allowfullscreen="" ></iframe>
</div>

나는 table을 짜야해서 inline css를 적용했지만 원문처럼 외부 css로 적용하면 된다.

 

원글에서는 padding-top:30px; 을 넣었지만 유튜브 영상 안에 빈 공간(위아래로 까만 여백)이 생기길래 뺐다.

 

 

#외부 CSS 적용

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div class="video-container">
<iframe src="https://www.youtube.com/embed/NuBBLxG01I0?modestbranding=1" frameborder="0" crolling="no" frameborder="none" allowfullscreen=""></iframe>
</div>

 

height(세로) 값을 padding 값으로 조절하다니..

이렇게 또 하나 배워간다.

 

 

#블로그 적용

티스토리 스킨 편집 - HTML편집 - CSS

 

티스토리 글쓰기 -  HTML

먼저 블로그 스킨 편집에서 CSS 코드를 넣어주고,

글쓰기에서 html(기본모드 →HTML)안에 iframe 코드를 넣어주면 된다.

 

 

#블로그 적용 예시

 

 

#웹사이트 적용 예시

Web 화면

 

Mobile 화면