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

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

QA

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

본문

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

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

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

 

 

 

이 질문에 댓글 쓰기 :

답변 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 값이 다 사라져 버립니다.. 게시판 게시물에는 코딩적용이 그대로 안되는거 같아서 질문드립니다

답변을 작성하시기 전에 로그인 해주세요.
전체 123,122 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT