유튜브 동영상 반응형 웹에 삽입하는 방법

 

자, 이제 이 간단하고 편리한 방법을 알아 봅시다. 태그 앞에 아래와 같이 추가합니다.

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

 

<iframe width="854" height="480" src="https://www.youtube.com/embed/a4IosLAbLXY" frameborder="0" allowfullscreen="">iframe>

 

 

그러면 자동으로 반응형 유튜브 동영상이 삽입됩니다.그리고 글을 쓸때 아래와 같이 html 편집모드에서 유튜브 동영상 소스코드를 삽입만 하면 됩니다. 아래와 같이 말이죠.

 

출처: http://sometimes-n.tistory.com/42 [종종 올리는 블로그]