I've been experimenting with the YouTube API and I've included the following code snippet in http://jsfiddle.net/aaronk85/wapFR/.
<div id="video-wrap2"></div>
<div id="video-wrap">
<div id="play-video"></div>
</div>
<style>
#video-wrap2 {
background-color: red;
width: 666px;
height: 666px;
z-index: 1000;
position: absolute;
}
#play-video {
display: inline;
float: left;
height: 400px;
width: 100%;
}
#video-wrap {
float: left;
display: inline;
width: 610px;
overflow: hidden;
position: absolute;
z-index: 1;
}
</style>
<script>
$(document).ready(function() {
$("#embed").replaceWith("<div id ='play-video'></div>");
$.getJSON("https://gdata.youtube.com/feeds/api/playlists/UUJUAqHnkDX15IvFoXIGTm2A?alt=json-in-script&callback=?&max-results=1", function(data) {
$.each(data.feed.entry, function(i, item) {
var dataContainer = $("#play-video");
var video = item.media$group.media$content[0].url;
video = video.replace('https://www.youtube.com/v/','https://www.youtube.com/embed/');
video = video.replace('version=3&f=playlists&app=youtube_gdata','wmode=opaque');
$('#play-video').append("<iframe wmode='opaque' style='z-index:0;position:absolute;' width='610' height='400' src="+video+"' frameborder='0' name='vid-frame' id='vid-fade' allowfullscreen></iframe>");
});
});
});
</script>
I'm trying to make video-wrap 2 appear on top of the video (random playlist I've selected). Everything seems to be working fine in all browsers except for IE. What am I missing in IE?
I've experimented with combinations of opaque/transparent but can't seem to get it right. Despite finding similar questions online and trying their solutions, I'm still facing difficulties.