게시판에 유튜브 모바일 반응형 오류
본문
유튜브 동영상을 게시판에 업로드하고, 크기를 화면에 맞게 조절이 되게 설정했습니다.
근데 아무리 스타일을 조정해도 그누보드 게시판 내에 기본으로 설정된 스타일 때문인지
따로 설정한 스타일 코드가 먹히질 않네요ㅜ 16:9 비율로 화면 꽉차게 설정한 패딩값이 그냥 진짜 패딩으로 인식되네요ㅠ 게시판에는 모바일반응형 유튜브를 올릴방법이 없을까요?
<div class="videoWrapper" style="position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;" >
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
width="560" height="315" src="https://www.youtube.com/embed/4wKTZsUp7TQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
답변 2
게시글의 html 에서 적당히 아이프레임을 주고...
<iframe src="https://www.youtube.com/embed/4wKTZsUp7TQ" frameborder="0" allowfullscreen></iframe>
------
view.skin.php 의 하단부에 아래의 스크립트를 추가해 보세요.
pc 와 모바일 모두입니다.
<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>