javascript - How to use iframe within a jQuery slide show -


i have full-screen background slideshow uses jquery, 7 images , iframe displays youtube video.

when iframe slide comes along shows bottom bit rest of page being white.

when next slide comes along iframe not fade out , remains there until slide show resets (to first slide)

also iframe non responsive, when click on doesnt play.

please help

        html          <div id="slider">         <img id="1" src="images/img_2615.png" style="hight:1048px; width:1571px;" alt="" />         <img id="2" src="images/img_2616.png" style="hight:1048px; width:1571px;" alt="" />         <img id="3" src="images/img_2619.png" "hight:1048px; width:1571px;" alt="" />         <iframe id="4" width="100%" height="100%" src="http://www.youtube.com/embed/kvwsp51kvo8?wmode=opaque" frameborder="0" class="youtube-video" allowfullscreen></iframe>         <img id="5" src="images/img_2620.png" "hight:1048px; width:1571px;" alt="" />         <img id="6" src="images/img_4189.jpg" "hight:1048px; width:1571px;" alt="" />         <img id="7" src="images/img_4245.jpg" "hight:1048px; width:1571px;" alt="" />         <img id="8" src="images/img_4283.jpg" "hight:1048px; width:1571px;" alt="" />     </div>     <!-- background slideshow -->`  css  #slider { overflow: hidden; /* set rules fill background */ min-height: 100%; min-width: 100%;  /* set proportionate scaling */ width: 100%; height: auto;  /* set positioning */ position: fixed; top: 0; left: 0; z-index: -1;}  #slider > img { float: left; display: none; //height: 1048px; //width: 1571px;}  #slider iframe { float: left; //display: none;}    js   sliderint = 1;  slidernext = 2;   $(document).ready(function(){  $('#slider>img#1').fadein(1000);  startslider();  });   function startslider() { count = $('#slider>img').size();  loop = setinterval(function () {      if(slidernext > count) {         slidernext = 1;         sliderint = 1;     }      $('#slider>img').fadeout(1000);     $('#slider>img#'+ slidernext).fadein(1000);      sliderint = slidernext;     slidernext = slidernext + 1; }, 7000) 

}


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -