이전 목록 다음

게시판에 유튜브 모바일 반응형 오류

rramiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 10:31:52 2,583

유튜브 동영상을 게시판에 업로드하고, 크기를 화면에 맞게 조절이 되게 설정했습니다.

근데 아무리 스타일을 조정해도 그누보드 게시판 내에 기본으로 설정된 스타일 때문인지 

따로 설정한 스타일 코드가 먹히질 않네요ㅜ 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>

2949312633_1660095441.3923.png

그누보드5
|

답변 2개 / 댓글 4개

비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 12:32:21

게시글의 html 에서 적당히 아이프레임을 주고...

<iframe src="https://www.youtube.com/embed/4wKTZsUp7TQ" frameborder="0" allowfullscreen></iframe>

------

view.skin.php 의 하단부에 아래의 스크립트를 추가해 보세요.

pc 와 모바일 모두입니다.

Copy 
<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>

답변에 대한 댓글 1개

ramiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 14:46:07
감사합니다!!
eeyekiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 10:38:14

https://www.thewordcracker.com/intermediate/how-to-make-ifrmae-video-responsive/

답변에 대한 댓글 3개

ramiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 11:10:22
감사합니다! 저렇게 div Wrapper 로 감싸도 감싸는 설정(position=relative )이 적용이 안되고 그냥 padding 으로 인식되더라구요ㅜ 그래서 저렇게 이상한 여백이 발생된거예요;;; 그누보드 게시판 내의 css 설정 때문인지 게시판 게시물에 적은 css style 값이 다 사라져 버립니다.. 게시판 게시물에는 코딩적용이 그대로 안되는거 같아서 질문드립니다
eyekiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 11:51:52
게시물 작성할 때 입력하면 필터로 모두 삭제됩니다.
설정을 따로 게시판 스킨의 style.css 에서 주셔야 합니다.
ramiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-08-10 (수) 14:45:22
역시 그렇군요. 감사합니다!!

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