[Javascript] 유튜브영상 반응형 삽입 방법

@욕심쟁이

·

2020. 2. 14. 11:08

반응형

- HTML

<div class="video">
	<iframe width="640" height="394" src="https://www.youtube.com/embed/주소?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

- 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");
        } 
   }); 
}
반응형