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

유튜브 반응형 만들기

· 1년 전 · 2325 · 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개

1년 전

감사 합니다.

@들레아빠 도움이 되셨기를 바랍니다^^

1년 전

사실 아이프레임에

style="displsy:block;width:100%;aspect-ratio:16:9"

를 주면 모두 해결이 됩니다.

어쨌거나 왕수고 하셨습니다.

@비타주리 아 그렇군요! 아직 부족합니다.;;

1년 전

@비타주리 와오 감사합니다

감사합니다.

@swot74 도움이 되셨길 바랍니다.^^

1년 전

감사합니다

@너나잘해 도움이 되셨기를^^

 

1년 전

안녕하세요
view.php은 어디폴더에 들어있나요?

초보라 미안합니다.ㅜㅜ

잘 사용할게요^^

게시글 목록

번호 제목
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