CODEWITHSUNDEEP
jquerycssiframeyoutube-apiz-index
ak85
ak85

Reputation: 4264

Youtube z-index issue in IE

I am playing around with the youtube api and have the below code 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 want video-wrap 2 to appear over the top of the video (random playlist I have selected). In all browsers except IE this seems to work. What am I missing in IE? I have tried combinations of opaque/transparent but I can't get it working. I have also found several similar questions but after trying things in these questions I am still having problems?

Upvotes: 2

Views: 1991

Answers (1)

arttronics
arttronics

Reputation: 9955

jsFiddle Demo

In IE web browser, stack order for z-index property is reset for child elements, depending on webpage layout.

However in your jsFiddle, your also using position:absolute for all elements except the child element.

To fix, add position: absolute; to your #play-video CSS styles.

This alternate jsFiddle does not use any z-index property, just the position:absolute setting for the child element #play-video.

Upvotes: 1

Related Questions