그누 5.4에서 게시물에 유튜브 사이즈문제
본문
모바일에서 사이즈가 크게나와서 잘리는 문제, 혹시 해결하신분 계신가요?
https://www.happyjung.com/lecture/2530?device=mobile
등등을 그대로 해봤지만, 해결을 못하고 있습니다. ㅜㅜ
iframe을 넣을 때, width="100%"는 작동을 안하더군요. (검색을 해보니, 원래 저런식으론 쓰는게 아니라고 하고...)
width="100%"를 넣으면, PC쪽에선 항상 width=300에 height=150처럼 작게 나오는 현상이 있습니다.
모바일에서 유튜브 동영상 리사이즈문제 어떻게 해결해야할까요? ㅠㅠ
답변 5
감사합니다. 결과적으로 안되었습니다. ㅠㅠ 계속 삽질을 하다보니, 모바일 관련문제가 아니라 PC쪽 화면이 문제인거 같습니다. 기본적으로 유튜브에서 제공되는 SRC의 width는 픽셀기반으로 주죠. 이걸 픽셀이 아닌, 다른식으로 주게 되면 무조건 PC쪽에서는 300x150사이즈로 뜨는 현상입니다. 알려주신 링크도 그대로 했습니다, 결국 최종문제는 PC쪽 화면에서 300x150사이즈로 뜨는 문제입니다. 모바일은 잘보이는 상태입니다. ㅠㅠ, 300x150이 어디서 나왔는지 정말 황당합니다.
style="width:100%" 이렇게 해보세요
이미 해봤는데, 마찬 가지였습니다. 크롬에 검사로 해당부분을 보면, %로 지정하면, 사이즈는 반영안됩니다. 그리고 나오는 결과물은 무조건 300x150이였습니다. 서치도 많이 해봤습니다. css부분에 클래스 만들고, 동영상첨부시 vw, vh등으로도 해봤습니다만 이것도 안먹혔습니다. ㅜㅜ
그렇게 했습니다만, 변한건 없습니다. 저걸 적용하고, 게시물에 유튜브 소서를 입력할때 div class를 지정해야하죠?
캐시삭제와 새로고침은 하셨는지요?
예 했습니다. 5/6 으로 시도하겠습니다~!!!!! 감사합니다.
저도 동일한 문제가 있었는데 해결했어요,
방법은 아래 코드예요.
#ctt {
width: 100%;
}
#ctt .youtube_wrap {
width: 100%;
height: 100vh;
}
#ctt .youtube_wrap > * {
width: 100%;
height: 100vh;
}
참고하세요 - 도움이 되었음 좋겠네요
전 반응형이라 아래처럼 넣으니 웹이든 모바일이든 잘 나오더라구요
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/xOeRHx1-EOg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
