Bild über einem Video (html5)

Ich versuche, ein Bild über einem Video (html5) anzuzeigen. Wenn ich anstelle des Videos ein setze … funktioniert es, aber wenn ich ein setze, ist das Video über dem Bild :/ Was kann ich tun?

<div class="videohead">
<video loop="loop" autoplay="autoplay"> 
<source src="https://stackoverflow.com/questions/5802183/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;
}

Verknüpfung: https://jsfiddle.net/kNMnr/1487/

Position in CSS3 mit Z-Index verwenden.

<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;
}

Sie können das Bild mit einem bestimmten Z-Index in CSS versehen und seine Position auf absolute Hoffnung setzen, das hilft …

Sieht so aus, als ob der Z-Index hier das Problem ist, wie der andere Benutzer vorschlägt, aber nur hinzufügen wollte. Wenn Sie nur ein Bild vor einem Video anzeigen möchten, können Sie auch das poster-Attribut des html5-Video-Tags verwenden.

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

Es gibt ein einfaches Videoattribut, das die Verwendung vorab geladener Bilder ermöglicht.

Das Attribut “Poster” definiert ein Posterbild, das anstelle des Videos steht.

Das Poster-Attribut gibt ein Bild an, das angezeigt werden soll, während das Video heruntergeladen wird oder bis der Benutzer auf die Wiedergabeschaltfläche klickt. Wenn dies nicht enthalten ist, wird stattdessen das erste Bild des Videos verwendet.