CSS로 유튜브 반응형 코딩

CSS를 사용하여 유튜브 동영상을 반응형으로 만드는 방법을 설명하겠습니다.

HTML 구조

먼저 유튜브 iframe을 div로 감싸는 구조가 필요합니다:

<div class="video-wrap">
    <iframe 
        width="100%" 
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video player" 
        loading="lazy"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</div>

CSS 스타일링

반응형 동영상을 위한 CSS 코드:

.video-wrap {
    position: relative;
    width: 100%;    
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

작동 원리

이 방식이 작동하는 원리는 다음과 같습니다:

• div 컨테이너에 padding-bottom: 56.25%를 설정하여 16:9 비율을 유지합니다.
• iframe을 position: absolute로 설정하여 컨테이너 내부에 고정시킵니다.
• 컨테이너의 height: 0과 overflow: hidden은 컨텐츠가 정확한 비율로 표시되도록 보장합니다.

이 방식을 사용하면 자바스크립트 없이도 브라우저 크기가 변경될 때 자동으로 동영상 크기가 조절됩니다.