[jQuery] jQuery CSS 반응형 비디오
CSS를 사용하여 웹 디자인을 반응형으로 만드는 방법에는 많은 방법이 있으며, 그 중 하나는 비디오 요소를 화면 크기에 맞게 조정하는 것입니다. jQuery를 사용하여 이를 구현하는 방법을 살펴보겠습니다.
1. HTML 및 CSS 구조 설정
먼저 HTML에서 비디오 요소를 생성하고 해당 비디오에 CSS 클래스를 지정합니다.
<video class="responsive-video" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
그런 다음 CSS에서 비디오 요소를 반응형으로 만들기 위해 다음과 같이 스타일을 지정합니다.
.responsive-video {
max-width: 100%;
height: auto;
}
2. jQuery를 사용하여 비디오 크기 조정
이제 jQuery를 사용하여 비디오 크기를 조정합니다. jQuery 라이브러리를 HTML에 추가하고 다음 스크립트를 작성합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(window).resize(function() {
adjustVideoSize();
});
function adjustVideoSize() {
var videoWidth = $('.responsive-video').width();
$('.responsive-video').height(videoWidth * 9 / 16); // 16:9 비율로 조정
}
adjustVideoSize(); // 페이지 로드 시 비디오 크기 조정
});
</script>
위의 스크립트는 페이지가 로드될 때 및 창 크기가 조정될 때마다 비디오의 크기를 조정합니다.
이제 웹 페이지에서 비디오가 화면 크기에 맞춰 반응형으로 표시될 것입니다.
결론
jQuery와 CSS를 사용하여 비디오를 반응형으로 설정하는 방법을 살펴보았습니다. 이를 통해 웹 페이지의 비디오 요소를 다양한 화면 크기에 맞게 조정할 수 있습니다.