유튜브 스크롤이 되지 않습니다
본문
풀페이지 스크립트를 사용중인데
한 화면에 동영상을 보여주고싶어서 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>
제가 예전에 했었던방법인데.. 야매긴하지만 어쨌든 되긴합니다. ㅋ
참고로 아래 스크립트는 동영상을 클릭하면 재생 또는 중지하도록 해둔겁니다.
정말 속시원하게 잘 해결되었습니다!! 감사합니다
