티스토리 유튜브 반응형 크기로 넣는 방법 총정리

티스토리 유튜브 반응형 크기로 넣는 방법 총정리

 

 

안녕하세요? 1분괴물입니다. 티스토리 블로그를 운영할 때 사진, 영상 등을 첨부하는데요. 요즘은 유튜브로 바로 공유해서 붙여넣을 수 있어서 편리하죠. 하지만, 티스토리 스킨마다 유튜브 영상이 자동으로 반응형으로 변하지 않는 경우도 있습니다. 특정 스킨은 HTML 편집으로 반응형 스킨 코드를 넣어도 적용되지 않았는데요. 티스토리 유튜브 반응형 크기로 넣는 방법에 대해 알려드리겠습니다.

 

 

 

 

 

 

 

추천 콘텐츠

카카오뷰 수익 인증 & 수익 후기 (3개월 정산)

 

 

 

 

 

 

 

 

HTML 스킨편집​

 

티스토리 블로그에 첨부된 유튜브 영상을 보면 모바일 크기에 맞게 크기가 조절되지 않아서 확대된 모습인데요. 포스팅을 보는 방문자가 확대된 영상을 클릭하지 않을 수 있기 때문에 빠르게 크기를 바꿔주셔야 합니다. 변경 방법은 간단합니다.

 

유튜브 반응형 태그.txt

0.00MB

 

<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>

 

• 유튜브 반응형 태그.txt 파일을 다운로드합니다.
• 티스토리 스킨 편집으로 들어가서 HTML 편집을 누릅니다.
• </head> 부분을 찾아서 위에 유튜브 반응형 태그를 붙여넣기 합니다.
• 적용을 누른 후 유튜브 영상이 반응형으로 크기가 변경되는지 확인합니다.

다시 블로그로 돌아와서 여태까지 넣었던 유튜브 영상의 크기를 모바일 기기로 확인해 보세요. 만약 반응형으로 크기가 변경되지 않는다면 해당 티스토리 스킨은 적용할 수 없는 태그입니다. 다른 방법을 사용해서 영상 크기를 줄이셔야 합니다.

 

 

 

 

 

 

 

 

유튜브 반응형 확인

 

티스토리 유튜브 반응형 크기로 넣는 방법 참 간단하죠? 스킨 편집에서 HTML 태그만 넣었을 뿐인데 자동으로 모든 포스팅 내에 있는 유튜브 영상의 크기를 반응형으로 바꿔줍니다. 초반에는 영상 사이즈를 작은 크기로 줄여서 사용했는데 이제 그럴 필요 없을 거 같습니다.

티스토리 플러그인으로 유튜브 반응형을 적용하면 좋겠지만, 블로그가 스킨 편집이 가능해서 모든 사이트가 다르기 때문에 불가능한 거 같습니다. 제가 사용한 스킨은 JB Factory 스킨입니다.