[css] 유튜브 iframe 반응형 css 사용하기

유튜브 iframe 반응형 css 사용하기

홈페이지를 제작할 때, ifame을 통해 유튜브나 동영상을 불러오는 경우가 많습니다.

그럴 때 그냥 사용하게 되면 모바일이나 테블릿에서 검은 배경이 노출되기 때문에 css를 조정해줘야하는데요.

다음은 ifame을 반응형으로 사용하는 방법에 대해 알아보겠습니다.

 

우선, 내가 사용할 동영상의 비율을 알아야 합니다.

일반적으로 pc 기준으로 16:9의 비율을 많이 사용합니다. 

다음은 16:9의 비율의 해상도입니다.

2160p	3840x2160
1440p	2560x1440
1080p	1920x1080
720p	1280x720
480p	1280x720
360p	640x360
240p	426x240

 

 

비율 구하기

다음은 해상도에 따라 비율을 구하는 방법입니다.

16:9일 경우에는 0.5625%의 비율을 사용해서 css 구현을 해주시면 됩니다.

 

• 4:3 일경우 3/4 = 0.75%
• 16:9 일경우 9/16 = 0.5625%
• 21:9 일경우 9/21 = 0.42857140%

 

 

[HTML]

<div class="video_wrap">
<iframe scr="링크"></iframe>
</div>

다음은 html입니다. 사용할 iframe에 div로 감싸줍니다.

 

 

 

[CSS]

.video_wrap{ position:relative; width:100%; height:0; padding-bottom:56.25%; } 
.video_wrap iframe{ position:absolute; width:100%; height:100% }

위의 코드는 19:6을 기준으로 한 CSS입니다.

CSS는 앞서 구한 비율의 값을 감싼 video_wrap에 padding-bottom에 주시면 됩니다.

• 4:3 일경우 3/4 = 75%
• 16:9 일경우 9/16 = 56.25%
• 21:9 일경우 9/21 = 42.86%