iframe youTube 동영상 배경으로 깔기~ > jQuery / Script

본문 바로가기
gnb bg


jQuery / Script

jQuery / Script

iframe youTube 동영상 배경으로 깔기~

본문

<!DOCTYPE html>

<html>

<head>

<title>Full page scroll</title>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js'></script>

<link rel='stylesheet' href='https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.css'>



<style type="text/css">

/*html, body{overflow: visible !important;}*/


.section1 {

background-color: #7DBCD4;

}


.section2 {

background-color: #98C19F; 

}


.section3 {

background-color:  #A199E2;

}


.section4 {

background-color:  #CC938E;

}


.section {

font-family: 'Open Sans';

font-style: bold;

text-align: center;

position: relative;

}



.iframeWrapper{

  display:inline-block;

  position:relative;

  width:100%; height:100%;

}


.iframeWrapper iframe{

  vertical-align:top;

   pointer-events: none; /*let any clicks go trough me */

}



</style>




</head>

<body>


<div id="fullpage">

<div class="section section1">

11111

</div>

<div class="section section2">

Two

</div> 

<div class="section section3">

333333333333

</div>

<div class="section section4">

<div class="iframeWrapper">

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/OqsXndQ5eI4?mute=1"  frameborder="0" allowfullscreen data-autoplay></iframe>

</div>

</div>

</div>







<script>



$( document ).ready( function() {


//var player = document.getElementById('ucc00');



$('#fullpage').fullpage({

sectionSelector:'.section',

verticalCentered: true,

keyboardScrolling: true,

animateAnchor: true,

autoScrolling:true


/*

onLeave: function(origin, destination, direction){

var leavingSection = this;


//구역 2를 떠난 후

if(origin.index == 2 && direction =='down'){

//alert("Going to section 4!");

//ucc();

//player.playVideo();

//$(player).this.stopVideo();

//$("#ucc00").attr("src","https://www.youtube.com/embed/OqsXndQ5eI4?enablejsapi=1&wmode=opaque&autohide=1&autoplay=1&controls=0");


}


else if(origin.index == 3 && direction == 'up'){

//alert("Going to section 3!");

//player.pauseVideo(); 

//$("#ucc00").attr("src","https://www.youtube.com/embed/OqsXndQ5eI4?enablejsapi=1&wmode=opaque&autohide=1&autoplay=1&controls=0");

}

}

*/


});


//ucc();




});




</script>




</body>

</html>

댓글목록

등록된 댓글이 없습니다.


Copyright 2005-2020 UNIDA_v7. All rights reserved.