유튜브 스크롤이 되지 않습니다

유튜브 스크롤이 되지 않습니다

QA

유튜브 스크롤이 되지 않습니다

본문

풀페이지 스크립트를 사용중인데

한 화면에 동영상을 보여주고싶어서 iframe을 넣고 width:100%; height:100vh를 넣었더니 스크롤이 되지 않습니다.

 

강제로 overflow-y:scroll도 넣었는데 스크롤바만 생기고 기능이 먹지 않는데 어떻게 해야할까요..?

 

아래는 마크업이고

<div class="section" id="section5">
        <div>
            <iframe src="https://www.youtube.com/embed/ㅇㅇㅇ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>

 

사용한 스크립트는 

<script type="text/javascript" src="/js/scrolloverflow.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['yellow', 'green', 'purple', '#f1f1f1','orange','red']
        });
    });
</script>입니다.

 

제발 도와주세요..ㅠ

이 질문에 댓글 쓰기 :

답변 1


<div class="section" id="section5">
    <div style="width: 100%;height: 100%;">
    <iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/ㅇㅇㅇ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:1;" id="play-video"></div>
</div>
<script>
$('#play-video').on('click', function() {
    
    $(this).toggleClass("on");
    if($(this).hasClass("on")){            
        $("#video")[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
        //$(this).css("z-index","1");
    }else{            
        $("#video")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
        //$(this).css("z-index","-1");
    }
});
</script>

 

제가 예전에 했었던방법인데.. 야매긴하지만 어쨌든 되긴합니다. ㅋ

참고로 아래 스크립트는 동영상을 클릭하면 재생 또는 중지하도록 해둔겁니다.

 

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

회원로그인

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