티스토리 동영상 모바일에서 사이즈 조절하기

티스토리 북스킨 동영상 사이즈 반응형으로 만들기

 

티스토리 인기 스킨인 '북클럽'을 잘 사용하고 있었습니다. 그런데 언젠가 부터 페이지에 동영상 삽입 후, 모바일 노출시 사동영상 사이즈의 넓이가 본문크기를 벗어나는것을 확인했습니다. 

 

이 문제를 해결하기 위해 수도 없이 HTML, CSS코드를 찾아가며 수정해 봤지만, 백방이 무효 였습니다. 

 

그러던 중 어느 사이트에 올라온 CSS코드를 혹시나 하는 마음에 한번 적용해 봤는데, 속을 썩였던 모바일에서 동영상 비정상적으로 커지던 문제가 사라졌습니다. 

 

티스토리 운영하시는 분들 중에 저와 같은 문제가 있으신 분들에게 코드를 올려 드립니다. 

 

 

1. 티스토리 북크럽 스킨의 CSS에 들어가서 

/* 비디오 첨부 */
#article-view figure[data-ke-type='video'] {
  display: table;
  table-layout: fixed;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 30px;
}

코드를 삭제 합니다. 

반응형

그리고 

 

.video-container {
    position: relative;
    width: 100%;
    height: 52vw;
    overflow: hidden;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* 모바일에서 최소 높이 적용 */
@media (max-width: 768px) {
    .video-container {
        min-height: 400px; /* 최소 높이를 400px로 설정 */
        height: 100vw; 
    }
}

를 추가 하면 모바일에서 반응하지 않았던 동영상 사이즈가 반응형으로 바뀌게 됩니다.