'Image over a video (html5)

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 ?

<div class="videohead">
<video loop="loop" autoplay="autoplay"> 
<source src="img/video.mp4" type="video/mp4" />
<img src="img/video.png"/> 
</video>
<a href=""><img src="img/logo.png" class="logo"/></a>
</div>

.videohead
{
margin: 5px 0 0 1px;
}

.logo
{
margin-top: -155px;
}
html


Solution 1:[1]

Link: https://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;
}

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[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.

Solution 5:[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sumit
Solution 2 abhijit
Solution 3 Martin Beeby
Solution 4 RickyAYoder
Solution 5 Franzé Jr.

Related Questions