Image over a video (html5)

Question

I\'m trying to display an image over a video (html5). If I put an instead of the video ... it works but when I put a the video is over the image :/ What could I do ?

Answer 1

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.

Answer 2

Link: http://jsfiddle.net/kNMnr/1487/

Use position in CSS3 with z-index.

  <div id="wrap_video">
    <div id="video_box">
        <div id="video_overlays">Logo</div>
        <div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

CSS:

#video_box {
    position:relative;
}
#video_overlays {
    position:absolute;
    width:160px;
    min-height:40px;
    background-color:#dadada;
    z-index:300000;
    bottom:10px;
    left:10px;
    text-align:center;
}

Answer 3

you can provide the image with a certain z -index in css and set its position to absolute hope that helps...

Answer 4

There is a simple video attribute that allows the use of pre-loaded images.

The "poster" attribute defines a poster image that is in place of the video.

Answer 5

Looks like the z-index is the problem here as the other user suggest, but just wanted to add. If you are tring to just display a picture before a video you could also use the poster attibute of the html5 video tag.

http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99