Youtube embeded video z-index

Question

I have embeded a youtube video on my site here http://jdwebmanagement.com/draft/united_football/ with this code:

<iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>

The problem is that the "Play Now!" button displays under the video. Also on IE when you click the first thumbnail of the carousel below, the modal displays under the video.

`The problem is that the "Play Now!" button displays under the video.` - Where do you want this to appear? — reggaemahn, Apr 17 '14 at 10:30
Looking for it to appear over the video as it does in Chrome and FF. Also the Modal popup to display on top of everything. — James Deadman, Apr 17 '14 at 10:32
The "Play Now!" displays under the video in Chrome and FF too. — Klevis Miho, Apr 17 '14 at 10:35
http://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index Maybe this can solve your problem. — Vladislav Stanic, Apr 17 '14 at 10:45
@JamesDeadman Seems to be working fine in IE10. What version are you using? Also, post your code for the video AND the button so we can better help. — reggaemahn, Apr 17 '14 at 11:03

score 0 · Answer 1 · answered Apr 17 '14 at 10:42

0

I suggest you to add another element using something like this:

<iframe></iframe><!--Under this-->
<div>button</div>

And in css :

margin-top:-/*something*/px

and it could work.

answered Apr 17 '14 at 10:42

Jamie

1,096
2
19
38

score 0 · Answer 2 · answered Apr 17 '14 at 11:04

0

you can add this code in your style.css

.video-wrapper .play-now 
{
margin-top: -150px;
}

pixel depends where you want to put you image. Hope this will work for you .

answered Apr 17 '14 at 11:04

alokkumarsharma

19
3

score 0 · Answer 3 · answered Apr 17 '14 at 11:09

Your "Play Now!" button is doing exactly what you told it to do. In your css you told ".video-wrapper .play-now" to align at -40px from the bottom of the closest relatively positioned parent, which is ".flex-video". Set ".video-wrapper .play-now" to a bottom that makes sense like 200px.

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: -40px;
      left: 32%;
      z-index: 10;
}

This needs to be changed to something like:

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: 200px;
      left: 32%;
      z-index: 10;
}

score 0 · Answer 4 · answered Apr 17 '14 at 11:09

You'll need to provide the code for the modal for us to be able to help you better. For the other part of the question, I suppose this is what you are looking for. Modify it to suit your needs:

HTML

<div id="container">
    <iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>
    <button id="play">Play Now</button>
</div>

CSS

#container{
    position: relative;
}

#play {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -100px;
}

FIDDLE

Youtube embeded video z-index

4 Answers4