종종 올리는 블로그

그래도 이 불편한 방법에 대해서 말씀드리자면..head에 다음을 추가합니다. ( 이 방법은 사용하지 마세요 )

<style>
.youtube { position: relative; width: 100%; padding-bottom: 56.25%; }
.youtube iframe { position: absolute; width: 100%; height: 100%; }
</style>

그리고 글을 쓸때 아래와 같이 html 편집모드에서 div 태그로 감싸고 글을 쓰면, 반응형으로 동영상이 컨텐츠 width 폭에 따라 유튜브 동영상도 크기가 변경됩니다.

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

그러나 이같은 방법은 앞에서 말씀드린것과 같이 그동안 썼던 글을 모두 수정해야 하는 불편함이 있습니다. 

이미 쓴 글이 많다면 거의 불가능에 가깝죠.

자, 이제 이 간단하고 편리한 방법을 알아 봅시다. </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 편집모드에서 유튜브 동영상 소스코드를 삽입만 하면 됩니다. 아래와 같이 말이죠.

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

그러면 자동으로 반응형 유튜브 동영상이 삽입됩니다.