티스토리 블로그를 하다보면 유튜브 동영상을 가져와서 본문에 넣고싶은 경우가 있다. 이 때 플레이어를 삽입하면 모바일에서 세로로 길게 나오면서 썸네일이 잘리는 경우가 있는데, 크기를 똑바로 조정하는 방법에 대해 알아본다.
삽입 방법에 따른 현상
티스토리 에디터에 유튜브 영상을 넣는 방법에는 몇 가지가 있다. 각각의 방법에 따라 어떻게 나오는지 보자. PC에서 넓은 화면으로 볼 때는 문제가 없는데, 모바일에서 웹브라우저로 보면 아래처럼 잘려서 보인다.
🔺 티스토리 관리자 메뉴의 플러그인에서 <Youtube 동영상 첨부>를 사용하고, 글 작성시 에디터에서 점 세개 > 플러그인 > Youtube 동영상 첨부를 눌러서 넣은 모습이다.
모바일에서 보면 플레이어가 세로로 길게 보이고 재생을 하면 위처럼 영상은 화면 폭에 맞게 나오는데 상하로 검은색 여백이 길게 존재하게 된다.
🔺 유튜브에서 공유를 누르고 나오는 단축 url을 그대로 본문에 붙여넣은 경우이다. 플러그인으로 넣은 것과 마찬가지로 썸네일은 잘려보이고, 플레이어가 상하로 긴 형태로 나와서 재생시 여백이 크다.
🔺 또 한가지는 유튜브에서 공유시 소스보기를 눌러서 iframe 형태로 가져와서 붙여넣은 경우이다. 이 경우는 그나마 좀 나은데, 상하 검은 여백이 보이는 것은 마찬가지다.
해결방법 소스코드
반응형 스킨의 모바일에서 플레이어 비율에 맞게 보이도록 하려면 아래 스크립트 코드를 사용해야 한다.
<!-- 티스토리 유튜브 반응형 코드 시작-->
<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>
<!-- 티스토리 유튜브 반응형 코드 끝-->youtube 링크가 들어가면 리사이즈 시켜주는 자바스크립트 코드이다. 위 코드를 복사하거나 아니면 아래 메모장 파일을 열어서 내용을 티스토리 스킨의 </head> 앞에 붙여 넣으면 된다.
스크립트를 많이 넣으면 스킨의 로딩 시간이 길어지는 단점이 있으니 유튜브 영상 첨부를 하지 않는 티스토리 블로거라면 굳이 넣을 필요가 없다.
지금 사용중인 라꼬 스킨의 경우 속도와 SEO에 최적화되어 있어서 불필요한 스크립트 소스가 모두 제외된 설계이다. 그래서 군더더기 같은 스킨 소스 추가는 가급적 안하려는 편인데, 이렇게 포스팅 작성시 정 필요하다고 생각되는 것만 최소한으로 넣으면 된다.
자바 스크립트를 넣지 않고, iframe 형태로 유튜브 소스를 수정해서 추가하는 방법도 있다. (위 자바스크립트는 그걸 자동으로 해주는 것이고) 그렇게 하면 글 작성시마다 번거롭고 시간이 추가되기 때문에 더 안좋을 것 같아서 그냥 이 소스를 사용하는 쪽을 선택했다.
적용 결과
🔺 앞서 말한 세 가지 유튜브 플레이어 삽입 방법에 대해 모두 이렇게 사이즈가 수정되어 보인다. 딱 재생 버튼을 눌러서 나오는 영상 크기만큼만 보여지도록 제한되고, 썸네일 이미지도 화면 안에 들어오게 된 것을 알 수 있다.
