디자인/html·css

유튜브 쇼츠 화면 꽉차게 보이기 (반응형 iframe embed)

반응형

 

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

 

 

적용전

 

 

 

반응형 쇼츠

여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 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% 맞춰서 꽉차게 나오게 된다.

 

반응형