-
[CSS] 동영상 반응형 사이트에 추가하기Coding 2022. 11. 10. 16:22반응형
사이트에 동영상을 넣을 때 width값을 넣지 않으면 동영상 사이즈에 맞춰 노출되기 때문에
보통 width 값을 기본으로 넣어주게 됩니다.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
하지만 width값을 고정으로 넣어주게 되면 반응형 웹의 경우
모바일이나 태블릿에서 동영상이 옆으로 넘쳐버리는 현상이 나타납니다.
그래서 반응형 웹은 동영상의 넓이와 높이값을 비율대로 늘어나도록 수정해야 합니다.
간단하게 html과 css로 수정할 수 있습니다.
<div class="video-container"> <video width="1200" class="video"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div> <style> .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .video-container .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
padding-bottom: 56.25%; 이 부분을 수정하면 비디오 비율 수정이 가능합니다.
56.25% 는 16:9 비율입니다.
video 태그에 video라는 클래스를 추가해줬기 때문에 iframe이나 embed 태그를 넣어도 상관없습니다.
유튜브의 권장 영상 비율도 16:9 이므로 유튜브에서 바로 embed 해오는 iframe 영상도 바로 적용할 수 있습니다.
반응형'Coding' 카테고리의 다른 글
[CSS] Hover 하는 형제들(siblings) 스타일 적용 (0) 2023.05.12 [Javascript] 카운트다운 만들기 (0) 2023.02.15 [JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형) (0) 2022.11.04 [HTML] 이미지맵 쉽게 만들기 (+JS+모바일에 적용하기) (0) 2022.11.01 안드로이드 웹뷰에서 엘리먼트 스크롤바가 보이지 않는 현상 (0) 2022.04.14