이 소스를 이용해서 반응형으로 만들 수 있을까요?
본문
먼저 나미웹을 잘 사용하고 있습니다.
https://homzzang.com/b/html-125
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm type="video/webm">
<source src="movie.ogg" type="video/ogg">
댁 브라우저가 후져서, video 태그 지원 안 함. ㅡㅡ;
</video>
영상은 직접 호스팅 서버에 올렸구요. 위 소스를 적용하니까 다행히 잘 나왔습니다.
그런데 반응형이 아니라서 크기를 따로 지정을 해야 하는게 있어서요.
위 소스를 적용시켰을 때 모바일에서도 웹에서도 자동으로 크기를 적용시킬 수 있는 방법이 없을까요.
답변 4
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율에 맞추려면 9을 16으로 나누고 100을 곱합니다. */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
댁 브라우저가 후져서, video 태그 지원 안 함. ㅡㅡ;
</video>
</div>
채택 감사 합니다.
<style type="text/css">
.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>
<div class="video-container">
<video width="320" class="video" autoplay muted>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
반응형같은 경우 기존 원본 영상의 이미지 크기에 따라, 또 어떤형태로 표출을 할 것이냐에 따라 분기에 따라 나누어 작업을 하는게 좋습니다.
비타주리님께서 작업하신 아래 스킨을 한번 살펴보시는 걸 추천드립니다.
답변을 작성하시기 전에 로그인 해주세요.
