Bild über einem Video (html5)

Lesezeit: 2 Minuten

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

Benutzer-Avatar
Vidya Tyagi

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 …

  • es funktioniert SUPER vielen Dank! .logo {Rand oben: -155px; Position: absolut; z-index: auto; }

    – Tonio

    27. April 2011 um 10:06 Uhr


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.

1017330cookie-checkBild über einem Video (html5)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy