유튜브 반응형 만들기

by 조쉬 posted Apr 09, 2024
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

적용 스킨의 view.php상단에 넣어주시면 됩니다.

 

적응형 홈페이지에서 유튜브 반응형으로

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

 

반응형 홈페이지에서 유튜브 반응형으로

<script>

onresize = function() {

    for (yt of bo_v_con.getElementsByTagName("iframe")) {

        yt.style.width = "100%";

        yt.style.height = yt.offsetWidth * 9 / 16 + "px";

    }

}

onresize();

</script>

 

pc에서나 모바일에서 화면에 꽉차게 유튜브 영상이 출력됩니다.

유튜브 영상을 <iframe으로 공유했을때 적용됩니다.