Bild über einem Video (html5)

Question

Ich versuche, ein Bild über ein Video (html5) anzuzeigen. Wenn ich ein anstelle des Videos setzen ... es funktioniert, aber wenn ich ein das Video setzen ist über das Bild :/ Was könnte ich tun?

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

Answer 1

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

Verwenden Sie Position in CSS3 mit 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 2

Sie können das Bild mit einem bestimmten z-Index in css versehen und seine Position auf absolut setzen hoffen, dass das hilft ...

Answer 3

Sieht aus wie die z-index ist das Problem hier, wie der andere Benutzer vorschlagen, aber wollte nur hinzufügen,. Wenn Sie versuchen, nur ein Bild vor einem Video anzuzeigen, können Sie auch das Poster-Attribut des html5-Video-Tags verwenden.

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

Answer 4

Es gibt ein einfaches Videoattribut, das die Verwendung von vorgeladenen Bildern ermöglicht.

Das Attribut "Poster" definiert ein Posterbild, das anstelle des Videos erscheint.

Answer 5

Das Poster-Attribut gibt ein Bild an, das angezeigt wird, während das Video heruntergeladen wird oder bis der Nutzer auf die Abspieltaste drückt. Wird dies nicht angegeben, wird stattdessen das erste Bild des Videos verwendet.