티스토리 스피드스타 스킨에서 유튜브 영상이 올바르게 삽입되지 않는 문제 해결

이 티스토리 블로그에는 스피드스타라는 스킨이 사용되고 있습니다. 티스토리가 업데이트되면서 어느 순간부터 이 블로그에 삽입된 유튜브 영상들이 제대로 표시되지 않고 있습니다. 

유튜브가 표시될 자리에 여백이 표시되거나 줄이 표시되는 현상이 발생했습니다.

티스토리 스피드스타 스킨에서 유튜브 영상이 올바르게 삽입되지 않는 문제 해결

스피드스타 스킨에서 이 문제가 발생하는 경우 꾸미기 » 스킨 편집 »HTML 편집에서 </style>을 검색하여 다음 CSS 코드를 추가하면 문제가 해결될 것입니다.

a[href*=youtu]>.resvid {
padding-bottom: 56.25%!important;
}

저는 살펴보니 다음 라인이 추가되어 있어 삭제하고 위의 라인을 추가하니 문제가 해결되었습니다.

.resvid {padding-bottom:0;}

유튜브 영상 삽입 시 문제가 나타나서 위의 코드를 추가했던 것으로 기억합니다. 이후에 티스토리가 업데이트되면서 위의 코드가 오히려 문제를 일으킨 것 같습니다.

찾아보니 카카오 데이터센터 화재 사건 이후에 유튜브 영상 아래에 여백이 표시되어 여백을 제거하는 코드를 추가했었네요.

티스토리 스피드 스타 스킨: 유튜브 영상 아래 여백 제거하기

 

참고

https://avada.tistory.com/2680

티스토리 댓글 목록 최신순으로 정렬하는 방법

https://avada.tistory.com/2605

티스토리 스피드스타 스킨에서 다크모드 전환 버튼을 상단으로 이동시키기

https://avada.tistory.com/3004

워드프레스 Divi 테마: 다목적 차일드 테마 Avanti