유튜브 영상 모바일 크기 조절 문의
본문
안녕하세요
유튜브 영상을 메인 화면에 넣으려고 합니다
그런데, 동영상의 크기를 지정하지 않으면 아래 사진처럼 서로 다르게 나오구요
(사진1,2)
가로,세로 사이즈 크기를 지정하면 PC 화면은 사이즈 대로 나오지만 모바일은 영상이 엄청 크게나오고 다른 내용은 작게 나옵니다. 아래 사진은 웨일로 본거구요. 실제로 모바일에서 보면 영상은 크게 나머지는 작아져서 나옵니다
(사진3,4)
제가 원하는것은 PC버젼은 원하는 사이즈로 나오고 모바일에서도 가로 화면에 꽉차게 나왔으면 합니다
방법이 있을런지요?
(사진1 PC화면)
(사진2 모바일 화면)
(사진3 PC화면)
(사진4 모바일화면)
답변 2
아래에서 800과 450 은 pc 에서 정해주는 치수입니다.
그리고 굳이 온리사이즈 함수를 사용한 이유는 모바일 세로모드와 가로모드의 체인징시 필요하기 때문에 해 준 거에요.
<div id=divPlayer style=width:800px;height:450px>
<iframe style=width:100%;height:100% src=https://www.youtube.com/embed/VlMEGBsw6j8?autoplay=1&loop=1&playlist=VlMEGBsw6j8&enablejsapi=1 frameborder=0 allowfullscreen></iframe>
</div>
<script>
onresize = function() {
if (("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0) {
divPlayer.style.width = "100%";
divPlayer.style.height = divPlayer.offsetWidth * 9 / 16 + "px";
}
}
onresize();
</script>
유튜브 반응형 이라고 구글에 치셔도 css 자료들이 있으실겁니다.
답변을 작성하시기 전에 로그인 해주세요.