본문 바로가기
IT

티스토리 참고용

by ㅖ 2019. 10. 14. 19:22

 - 반응형 스킨에서 유튜브 자동으로 크기 조절하는 자바스크립트 소스

1. 블로그 관리 홈 skin 편집에서 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")) * 360 / 640 ) + "px");} }); }
</script>

2. 에디터에 내용 삽입

<iframe width="640" height="360" src="https://www.youtube.com/embed/고유주소" frameborder="0" allowfullscreen=""></iframe>

 - 반응형 스킨에서 유튜브 자동으로 크기 조절하는 에디터용 html / div 소스(에디터에서만 씀)

<div style="position:relative; height:0; padding-bottom:56.25%;">
  <iframe src="https://www.youtube.com/embed/고유주소" width="640" height="360" frameborder="0" style="position:absolute; width:100%; height:100%; left:0;" allowfullscreen></iframe>
</div>

출처 : https://sometimes-n.tistory.com/42

 

 

 - 프로필 사진

메인 배너
https://pixabay.com/ko/illustrations/블랙-조직-배경-톤-다크-2398956

메인 부제
https://pixabay.com/ko/photos/초상화-사람들-어둠-아트-3113651

메인 블로그
https://pixabay.com/ko/photos/눈-다크-보-관찰-계-2488227

댓글