동영상 첨부 시, 하단 여백 현상

어느날 부턴가 티스토리에 동영상 첨부시 하단 여백이 생겼는데요. 이건 블로그 개별 스킨의 문제가 아니라 티스토리에서 자체적으로 만드는 CSS에서 발생한 것으로 예상이 돼서 티스토리에서 빨리 조치를 할 것이라 생각 했지만, 아무런 대응을 하지 않다보니 직접 원인을 파악하고 문제 해결 방법에 대해서 알려드리고자 합니다.

 

동영상 첨부 시, 하단 여백 현상

---

동영상 하단 여백 현상

동영상 하단 여백 현상

 

처음에는 스킨 문제라 생각했는데 F12로 개발자모드를 모드 티스토리 CSS 때문에 발생한 것이었습니다.

 

div에서 여백까지 잡혀 있다.

 

원인이 되는 video-wrap이라는 태그는 제 블로그 스킨 css가 아니었기 때문이죠. 파일의 경로를 보니 티스토리의 서버에서 받는 CSS 였습니다.

 

 

figure[data-ke-type='video'] .video-wrap 태그를 보면, 하단에 padding-bottom 부분이 있는데 이 부분의 체크 해제를 하니 아래와 같이 하단의 여백이 사라졌습니다. 참고로 padding-bottom은 감싸는 하단 부분이라는 의미로 이 값이 많아질수록 하단의 여백이 커지게 됩니다.

 

문제가 사라진 동영상 화면

 

이제 원인을 알았으니, 문제를 해결해보고자 합니다.

 

 

문제해결 방법

방법은 우리가 해당 태그를 신규로 추가를 하는 것입니다. 즉 아래와 같은 CSS 태그를 신규로 추가합니다.

 

figure[data-ke-type='video'] .video-wrap {
    width: 100%;
    position: relative;
	padding-bottom: 0;
}

 

스킨 편집에서 CSS를 선택한 후 하단의 영역에 위의 CSS 코드를 넣습니다.

 

padding-bottom 영역의 css를 추가한다

 

 

적용했으면, 적용 버튼을 클릭 한 후 동영상이 있는 포스팅이 제대로 작동하는지 파악합니다.

 

하단 여백이 사라졌다

 

위와 같이 하단의 여백이 사라진 것을 확인할 수 있습니다.