[CSS3][JAVASCRIPT/JQUERY]유튜브 동영상 반응형으로 삽입하는 두가지 방법

단순히 iframe을 이용해 동영삽을 삽입할 경우 비율이 달라지기 때문에 화면 크기에 따라 동영상 상하 또는 좌우에 까맣게 빈 영역이 생긴다. 

 

이를 없애주기 위해 동영상영역도 반응형으로 넣어줘야 한다.

두가지 방법중 한가지만 적용하면된다.

 

 

 

 

1. CSS로 적용하는 경우

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

<div class="youtube">
     <iframe.....>
</div>

2. 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");
           } 
     }); 
   }