유튜브 영상, 쇼츠 화면 반응형 코드 iframe embed

 

유튜브 영상이나 쇼츠를 유튜브에서 복사한 코드 그대로 가져오는 경우, 반응형이 아니라서 기기에 따라 양옆에 여백이 생기게 된다.

 

 

적용전

 

 

 

반영형 영상

 

1) 먼저 영상 아이프레임 코드를  <div class="video-container"> 로 감싸준다.

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/6KYPsNmCkTw" frameborder="0" allowfullscreen=""></iframe>
</div>

 

 

2) CSS로 iframe이 영상 비율에 맞게 나올 수 있도록 한다.

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

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

 

 

 

 

 

반응형 쇼츠

여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 CSS를 조정하면 된다.

 

1) 먼저 쇼츠 아이프레임 코드를 <div class="shorts-container">로 감싸준다.

<div class="shorts-container">
<iframe src="https://www.youtube.com/embed/6KYPsNmCkTw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

 

 

2) CSS로 iframe이 쇼츠 비율에 맞게 나올 수 있도록 한다.

.shorts-container {
    position:relative;
    width:100%;
    height:0;;
    padding-bottom:177.78%
}

.shorts-container iframe {
     position:absolute;
     width:100%;
     height:100%;
     left:0;
     top:0;
}

 

 

 

적용후

디바이스 크기가 변해도 항상 가로세로 100% 맞춰서 꽉차게 나오게 된다.