I have been working on a custom image slider featured here:
JQuery
$(function(){
$('.cont:gt(0)').hide();
$("#parent").on("mouseenter", ".extraContent div", function(){
var ind = $(this).index();
$("#parent").find(".cont").stop().fadeTo(600,0,function(){
$('#parent').find('.cont').eq(ind).stop().fadeTo(300,1);
});
});
$('#parent .extraContent').on('click',function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
CSS
?#parent { width:400px; margin:auto}
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; }
.extraContent {overflow:auto; width:450px;}
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px }
.extraContent div:hover { border:1px solid #0F0;cursor:pointer }
.cont{
position:absolute;
}
HTML
<div id="parent">
<div class="mainContent">
<div class="cont"> Content 1....</div>
<div class="cont"> Content 2....</div>
<div class="cont">Content 3...<br /><iframe width="267" height="200" src="http://www.youtube.com/embed/6tlQn7iePV4?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div class="cont"> Content 4....</div>
</div>
<div class="extraContent">
<div><p>1 Custom content here <br /> <a href="">Some link</a></p></div>
<div><p>2 Custom content here <br /> <a href="">Some link</a></p></div>
<div><p>3 Custom content here <br /> <a href="">Some link</a></p></div>
<div><p>4 Custom content here <br /> <a href="">Some link</a></p></div>
</div>
</div>?
My problem is if I embed YouTube video straight from the site using there iframe it transitions fine in Chrome but Firefox & IE just display the video straight away and each slide/div appears under the video, is this a known problem and doesn't anyone know a way I can get IE & FF to behave.
p.s. because this is going to be in a content management system the only way the user can embed the video is using the default code from youtube.
FIDDLE HERE
