티스토리 블로그에 유튜브 동영상 반응형으로 넣기

저는 TV 보다 유튜브 동영상 시청을 더 많이 하는데, 집에 TV가 없기도 하지만 ^^ 유튜브 채널을 검색하다 보면 너무 재미있고 훌륭하여 제 블로그에 공유하여 알리고 싶은 동영상들이 많이 있습니다.


자주는 아니지만 간혹 그런 영상을 발견하면 제 블로그에 링크를 걸기도 하고 제가 올린 동영상을 넣기도 하는데 티스토리 스킨을 반응형으로 변경 후 유튜브 동영상 플레이어의 상.하에 검은색 여백이 길쭉하게 표시되었습니다.


처음에는 유튜브 내장 플레이어의 상하여백이 있어도 재생되는 동영상의 화면 비율은 정상적이라서 어쩔 수 없다는 생각이 들었는데 오늘 검색을 통해 이 문제를 해결할 수 있는 방법을 찾았습니다 ^^ 


문제점.


휴대폰에서 반응형 스킨이 적용된 블로그 페이지를 로딩 했을 때 재생되는 동영상의 화면 비율은 정상적이지만 유튜브 동영상 플레이어 화면 위 아래로 공백이 발생하여 부자연스럽게 보입니다. 





원인.


티스토리 블로그에서 글쓰기 하면서 유튜브 동영상 넣을 때  유튜브 재생 플레이어의 넓이와 높이를 고정형 수치로  입력하여 플레이어의 비율이 망가지는 문제가  발생 합니다.


유튜브 동영상 공유 소스 코드의 예.



<iframe width="560" height="315" src="https://www.youtube.com/embed/xPvyrmPszlY" frameborder="0" allowfullscreen></iframe>


이렇게 넓이는 560, 높이는 315로 고정되어 있죠 



해결 방법.


<div> 클래스와  CSS 스타일로 해결 가능.  유튜브 동영상을 반응형으로 알맞게 보여주기 위한 클래스를 css 파일에 정의하여 적용합니다. 코드는 아래와 같습니다.



.embed-container { 


position: relative; 

padding-bottom: 56.25%; 

height: 0; 

overflow: hidden; 


}


.embed-container iframe, .embed-container object, .embed-container embed {


position: absolute; 

top: 0; 

left: 0; 

width: 100%; 

height: 100%; 

}


여기까지를 티스토리 스킨의 style.css에 추가한 후 저장을 합니다. 


티스토리 블로그에 글을 작성할 때 html 편집 상태에서 아래의 코드 형식으로 유튜브 동영상을 넣어 주시면 됩니다. 



<div class='embed-container'>

<iframe width="560" height="315" src="https://www.youtube.com/embed/-kypVh6MM4U" frameborder="0" allowfullscreen></iframe>

</div>


http://www.youtube.com/kypVh6MM4U 이 부분은 제가 임의로 지정한 유튜브 동영상 주소인데 본인이 링크 하려는 유투브 동영상 주소를 넣어 주시면 됩니다.



(제가 유튜브에 업로드한 동영상 입니다 ^^ 테스트용으로 링크 했어요)



.padding-bottom: 56.25%의 의미


16:9 와이드 비율


9 / 16 = 0.5625 = 56.25%


가로 폭은 가변형이므로 padding-bottom 수치를 퍼센트로 지정하여 16:9의 와이드 화면 비율로 보여주는 방식 입니다. 아래 캡쳐 화면 처럼 위 아래의 검은 색 레터박스 없이 동영상이 재생됩니다.







4:3 표준 비율


3 / 4 = 0.75 = 75%


와이드 화면이 아닌 표준 비율의 동영상이라면 padding-bottom 값을 75%로 바꿔 주시면 됩니다. 클래스를 각각 따로 정의하여 동영상 비율에 맞게 넣기를 하시면 됩니다. 



.embed-container-169 {

  padding-bottom: 56.25%;

}

.embed-container-43 {

  padding-bottom: 75%;


위와 같은 코드로 적용을 하시면 될 겁니다.


제가 사용 중인 반응형 스킨은 마크쿼리 스파이더스웹 입니다만, 스파이더스웹 스킨에는 이미 저런 해결책이 css 파일에 정의 되어 있었습니다 ^^ 제가 1년이 넘도록 모르고 있었던 것이죠


스파이더스웹 스킨 파일에서 Ctrl + f 찾기를 하여 56.25% 키워드로 찾으면 이미 정의되어 있는 클래스 이름을 찾을 수 있을 겁니다. 유튜브 동영상 넣기를 할 때 


<div class='embed-container'>


Class 이름을 css 파일에 정의된 이름과 같은 것으로 바꿔 주시면 됩니다. 만약 16:9 동영상임에도 위 아래로 조금씩 검은색 여백이 발생한다면  padding-top: 30px; 의 값을 0으로 바꾸거나 아예 삭제해보시기 바랍니다. -끝-