게시글 유튜브 영상에 반응형 가로 100% 쉽게 주기 > 그누보드5 팁자료실

그누보드5 팁자료실

게시글 유튜브 영상에 반응형 가로 100% 쉽게 주기 정보

게시글 유튜브 영상에 반응형 가로 100% 쉽게 주기

본문

보통 게시글의 본문을 감싸고 있는 div 의 id 가 bo_v_con 이므로.

 

view.skin.php 의 본문 하단 적당위치에 아래의 스크립트를 추가해 줍니다.

만일 다른 onresize 이벤트가 있다면 이벤트를 분절하거나 더해서 코드를 맞춰주세요.

온리사이즈 이벤트가 필요한 이유는

모바일에서 가로모드에서 세로모드 또는 그 역방향시 사이즈를 자동으로 리사이징 하기 위해 필요합니다.

 


<script>
onresize = function() {
    for (ytIframe of bo_v_con.getElementsByTagName("iframe")) {
        if (ytIframe.src.indexOf("youtube.com/embed/") > -1) {
            ytIframe.style.width = "100%";
            ytIframe.style.height = ytIframe.offsetWidth * 9 / 16 + "px";
        }
    }
}
onresize();
</script>
추천
16

댓글 10개

좋은 자료 감사합니다~
비타주리님 자료 보면 종종 유료로 손색 없는 자료도 있는데
공개 소스로 제공해주셔서 늘 감사하게 잘 사용하고 있습니다
제공해주시는 자료마다 제가 아주 목마른 자료라서
귀하게 사용하고 있습니다~ 추천 꾹~ 누르고 갑니다~^^
전체 2,167 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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