SIR
목록으로

모바일에서 ifame 크기 자동조절 되도록 채택완료

psmjya
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,185
답변 3
목록

PC web홈페이지 main에

 visual slider를 지우고 iframe으로 유투브동영상을 넣었더니  모바일에서 홈페이지 접속시 동영상 부분 화면만 프레임을넘어가서 보이는데

PC에서는 메인에 꽉차게 동영상이 보여지게 그대로 두고 모바일 사이즈만 조절되도록 어떻게 설정해야할까요?

 

#iframe #동영상 #사이즈 #유튜브

답변 3개

채택된 답변
+20 포인트

<iframe id="my" ....></iframe>

 

위와 같다고 가정하고 미디어쿼리 css 를 활용한다면

 

<style>

#my { width:1280px; } // pc

@media screen and (hover:none) and (pointer:coarse) {

    #my { width:400px; } // 모바일

}

</style>

 

------------

 

자바스크립트를 사용한다면

 

<script>
pcm = "win16win32win64macmacintel";
if (pcm.indexOf(navigator.platform.toLowerCase()) < 0) {

    my.style.width = "400px";

} else {

    my.style.width = "1280px";

}
</script>

 

저 같으면 3항문으로 줄여서

 

<script>
pcm = "win16win32win64macmacintel";
my.style.width = (pcm.indexOf(navigator.platform.toLowerCase()) < 0 ? 400 : 1280) + "px";
</script>

 

그런데 사실 이건 미봉책입니다. 모바일 세로모드 가로모드 전환시에 따른 리사이징이 빠져 있으니까요.

상황에 따라 적절하게 onresize 이벤트를 넣어줘야 "진정한 반응형"이 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

제가 잘 적용할 줄 몰라서 못쓰는건지.. 저는 실행이 안되던데요...'';;;
그래도 답변주셔서 중간 중간 팁을 알아가게 되어 채택합니다^^

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

아래 코드 사용하니 잘되네요^^;;

<script>
onresize = function() {
    if (("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0) {
        divPlayer.style.width = "100%";
        divPlayer.style.height = divPlayer.offsetWidth * 18 / 19 + "px";
    }
}
onresize();
</script>

로그인 후 평가할 수 있습니다

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

Copy 
$('#frame').on('load', function() {
    this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';
});

저런 느낌에 모바일인지 따지는 코드만 추가하면 되겠네요

로그인 후 평가할 수 있습니다

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

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고