지식 기반 → 너비가 100%인 웹사이트에 적응형 비디오 삽입

일반적으로 사이트에 비디오를 삽입하면 프레임 크기가 코드에 표시되며 화면 해상도를 변경하면 다른 장치에서 사이트에 삽입된 비디오가 마치 화면을 고려하지 않고 표시되는 것으로 나타났습니다. 비디오 호스팅 자체에서 열었습니다.

우리의 임무는 페이지 크기가 변경되면 비디오 프레임의 크기도 자동으로 변경되는지 확인하는 것입니다. 다른 장치에서 사이트를 열면 비디오가 화면 크기에 맞게 조정됩니다.

이 설명서는 YouTube 및 MediaCMS 응용 프로그램에서 테스트되었습니다.

기본적으로 다음과 같은 링크가 수신됩니다.

<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>

비디오를 자동으로 조정하려면 다음 코드를 양식으로 가져오세요.

<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

보시다시피 고정 크기를 제거하고 2개의 CSS 클래스(컨테이너 및 비디오)를 추가했습니다.

이제 사이트의 스타일 파일에 다음 클래스를 추가해야 합니다.

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

컨테이너 요소에는 높이가 0이고 하단 패딩 비율이 지정됩니다. 하단 패딩 백분율은 컨테이너 너비의 백분율이므로 가로 세로 비율이 고정되어 있습니다. 그러나 iframe을 높이가 0인 컨테이너 내에 표시하려면 컨테이너를 div 내부에 배치하여 컨테이너를 상대 컨테이너로 만들고 iframe을 절대 컨테이너로 만들어야 합니다.

CSS 파일 경로에 버전을 추가하는 것을 잊지 마세요. 그러면 다시 열 때 이전에 브라우저에 의해 저장된 캐시된 버전이 아닌 실제 스타일 파일이 로드됩니다.

예:

<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">

이제 삽입된 비디오가 화면 크기나 브라우저 창 크기에 자동으로 맞춰집니다.