티스토리 유튜브 플레이어 안나오는 현상 해결방법

요즘은 티스토리 스킨별로 반응형으로 플레이어 크기를 자동 조정하도록 다 설정이 되어 있다. 그런데 뭘 잘못 건드렸는지 삽입한 유튜브 영상이 안나와서 CSS를 수정해서 해결한 방법이다.

관련 글 : 워드프레스 블로그에서 반응형 유튜브 플레이어를 넣는 방법은 지난 글을 참조

먼저 문제가 있던 티스토리 프라치노 공책 스킨의 소스 상태는 다음과 같았다.

티스토리도 에디터에서 유튜브 url 주소만 치면 알아서 플레이어가 들어가도록 편리하게 되어 있다. 이걸 html 소스로 보면 다음과 같이 figure 형태로 삽입이 되는 방식이다.

<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="유튜브 주소" data-video-thumbnail="썸네일 이미지" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent" data-original-url="" data-video-title=""><iframe src="embed 형태 유튜브 주소" width="860" height="484" frameborder="0" allowfullscreen="true"></iframe>
<figcaption style="display: none;"></figcaption>
</figure>

여기에는 딱히 문제가 없어 보인다. 플레이어의 가로 세로 폭을 지정하고 보여주도록 되어 있다. iframe을 통해서 창을 띄우며 이는 유튜브 비디오 영상을 임베드 하는 표준 방식에 부합한다.

그럼 저기 있는 요소명들의 css 지정 상태를 알아보자.

.video-frame {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-top: 0% !important
}

.video-frame[style*="0%"] {
    padding-top: 0% !important
}

.video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

css는 이렇게 되어 있다. 음 여기가 뭔가 이상하다. height:0; 으로 높이가 0으로 설정되어 있다. 이 때 개체가 화면에 보여지려면 padding-top 부분이라도 영역이 존재해야 한다.

height를 영상마다 일일이 지정해 줄 수는 없으니, 반응형에 맞게 하려면 padding-top 부분을 비율로 해주는 것이 정석이다.

유튜브 영상의 가로세로 비율 (종횡비) 16:9에 맞게 padding-top : 56.25%; 라고 지정해 주면 된다. !important는 부모 요소의 지정된 설정을 따르지 않고 여기서 강제로 적용하겠다는 것인데, 안 넣어도 문제가 없이 적용된다면 굳이 넣을 필요는 없다.

이렇게 css에서 padding-top 부분을 바꿔 주었더니 링크로 삽입한 유튜브 플레이어가 티스토리 블로그 본문에 정상적으로 나타났다. 아마 내가 스킨 수정하다가 이 부분도 실수로 건드렸던 모양이다.