유튜브 (YouTube) 반응형 코드 적용하기

안녕하세요! 기기덕후기덕입니다.

 

홈페이지를 관리할 때 유튜브 영상을 바로 재생시켜야 할 때가 있는데요, 그럴 때 반응형 사이트나 모바일에서 유튜브 등의 동영상을 iframe으로 삽입할 경우 제공되는 소스를 그대로 넣으면 사이트가 어긋납니다.

 

그렇기 때문에 다음과 같이 코드를 추가, 수정해줘야 하는데요

 

동영상의 width는 100%, height는 0으로 설정하여 화면에서 보여지지 않게 한 후에 padding값을 조절하여 모바일 어느 기기에서도 width, height 둘 다 100%로 보여지게 합니다.

<div class="video-container">
 	<iframe src="https://youtu.be/2el6Ucz9YzA?feature=shared" frameborder="0" allowfullscreen="">
 	</iframe>
</div>​

 

 

그 후에 스타일 값을 적용해줘야 하는데요, 화면의 비율에 따라 padding값을 다르게 줘야합니다.

 

화면 비율

21:9 일경우 9/21 = 42.8571428571429‬%
16:9 일경우 9/16 = 56.25%
4:3 일경우 3/4 = 75%

<style>
	.video-container {
  		position:relative;
  		height:0;
  		padding-bottom:56.25%;
	}

	.video-container iframe {
  		position:absolute;
  		top:0;
  		left:0;
  		width:100%;
  		height:100%;
	}
</style>