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)
}