G

유튜브 반응형 만들기

적용 스킨의 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개

감사 합니다.

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

사실 아이프레임에

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

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

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

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

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

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

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

 

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

초보라 미안합니다.ㅜㅜ

잘 사용할게요^^

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

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

복받으세요^^

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

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

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
1년 전 조회 2,097
1년 전 조회 1,820
1년 전 조회 2,199
1년 전 조회 1,522
2년 전 조회 1,276
2년 전 조회 5,934
2년 전 조회 2,000
2년 전 조회 1,598
2년 전 조회 1,394
2년 전 조회 1,394
2년 전 조회 2,043
2년 전 조회 1,557
2년 전 조회 1,556
2년 전 조회 3,503
2년 전 조회 2,589
2년 전 조회 1,951
2년 전 조회 2,030
2년 전 조회 1,681
2년 전 조회 2,314
2년 전 조회 1,293
2년 전 조회 1,655
2년 전 조회 1,144
2년 전 조회 3,658
2년 전 조회 1,814
2년 전 조회 1,973
2년 전 조회 1,332
2년 전 조회 1,858
2년 전 조회 1,786
2년 전 조회 2,367
2년 전 조회 1,783