반응형 Tistory_YouTube 넣기

반응형 스킨에서 유투브를 제대로 보기 위해서 준비해야 할 것이 있다.

 

아래의 소스를 티스토리의 관리자 화면, HTML의 </head> '위' 또는 '아래'에 적어 주면 된다.

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

 

 

HTML_적은 모습

</head> <!-- Youtube_반응형 --> <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_반응형 -->

 

 

 

---

 

 

 

전에 사용하던 방법은 관리자 화면의 CSS에 다음 글을 적어주면 됐는데 지금은 안된다.

/* 유투브 _ 티스토리에서 반응형 올리는 방법 */ .tt-youtube-plugin { position:relative; padding-bottom:56.25% !important; height:0; overflow:hidden; } .tt-youtube-plugin iframe, .tt-youtube-plugin object, .tt-youtube-plugin embed { position:absolute; top:0; left:0; width:100%; height:100%; }

 

 

전에는 글쓰기 화면에서 유투브를 플러그인으로 불러 들여서 'HTML' 을 살펴보면 tt-youtube-plugin 라는 문자(코드)가 함께 생겼는데 지금은 iframe 문자(코드)만 나타난다.   언제부터이지?...

<iframe >

... 

</iframe>

 

 

 

2016. 04. 24.

방금 확인 했는데.... 다시 코드에 tt-youtube-plugin가 붙어있다. 

티스토리의 글쓰기 화면에서 HTML 코드가 일정하게 구현이 안되네.  오류가 자주 생기는 이유가 이 때문인가보다.  

모바일에만 신경을 쓰는 다음, 아니 지금은 카카오라고 해야겠네.  티스토리에는 상대적으로 소홀하다는 느낌이다.

 

<P> <DIV class=tt-youtube-plugin style="TEXT-ALIGN: left"><IFRAME height=540 src="http://www.youtube.com/embed/s9AmjWg7pKw?rel=0" frameBorder=0 width=720 allowfullscreen></IFRAME></DIV></P>