Youtube iframe width 100% height auto

유튜브 영상을 블로그나 페이지에 삽입시 고정 너비로 삽입하기 싫을 경우가 있다. 이럴때는 몇가지 @media 사이즈를 정해서 할 수도 있지만 너비가 유동적일 때는 width 값을 100%로 주고 높이를 auto로 해주고 싶다.

 

이럴때 사용 하는 팁! 유튜브 영상 자동으로 높이조절하기!

 

1. 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%;
}

 

2. html 코드에서 iframe을 <div class="video-container"></div>로 감싸준다.

<div class="video-container">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/wzp0SWXS-zk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

 

그러면 짜잔!

 

#자료의 출처: https://avexdesigns.com/responsive-youtube-embed/

Responsive Youtube Embed | Tutorial | Avex Designs