[CSS] 동영상 반응형 사이트에 추가하기

 

사이트에 동영상을 넣을 때 width값을 넣지 않으면 동영상 사이즈에 맞춰 노출되기 때문에 

보통 width 값을 기본으로 넣어주게 됩니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

 

하지만 width값을 고정으로 넣어주게 되면 반응형 웹의 경우

모바일이나 태블릿에서 동영상이 옆으로 넘쳐버리는 현상이 나타납니다.

video breakout (source. css-tricks)

그래서 반응형 웹은 동영상의 넓이와 높이값을 비율대로 늘어나도록 수정해야 합니다.

간단하게 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 영상도 바로 적용할 수 있습니다.