게시판에 유튜브 모바일 반응형 오류
본문
유튜브 동영상을 게시판에 업로드하고, 크기를 화면에 맞게 조절이 되게 설정했습니다.
근데 아무리 스타일을 조정해도 그누보드 게시판 내에 기본으로 설정된 스타일 때문인지
따로 설정한 스타일 코드가 먹히질 않네요ㅜ 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>
감사합니다!!
감사합니다! 저렇게 div Wrapper 로 감싸도 감싸는 설정(position=relative )이 적용이 안되고 그냥 padding 으로 인식되더라구요ㅜ 그래서 저렇게 이상한 여백이 발생된거예요;;; 그누보드 게시판 내의 css 설정 때문인지 게시판 게시물에 적은 css style 값이 다 사라져 버립니다.. 게시판 게시물에는 코딩적용이 그대로 안되는거 같아서 질문드립니다
게시물 작성할 때 입력하면 필터로 모두 삭제됩니다.
설정을 따로 게시판 스킨의 style.css 에서 주셔야 합니다.
역시 그렇군요. 감사합니다!!