테스트 사이트 - 개발 중인 베타 버전입니다

유튜브 반응형 만들기

· 1년 전 · 2324 · 13

적용 스킨의 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으로 공유했을때 적용됩니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 13개

@초록물고기 그누보드 디렉토리에서 skin폴더에서 board 안에 basic이나 적용한 게시판스킨 안에 있습니다. 테마에서 게시판을 적용했을때는 theme안에 skin에 board안에 basic이나 적용한 보드스킨에 있습니다. 

1년 전

@GREENnBLUE 답변 너무 감사합니다.

복받으세요^^

@초록물고기 네 도움이 되셨기를..^^

게시글 목록

번호 제목
24318
24317
24315
24309
24294
24293
24277
24262
24260
24253
24251
24236
24233
24228
24226
24221
24214
24203
24201
24199
24196
24195
24194
24192
24191
24187
24185
24183
24172
24168