Изображение поверх видео (html5)

Question

Я пытаюсь отобразить изображение поверх видео (html5).Если я поставлю вместо видео ... это работает, но когда я ставлю видео поверх изображения: / Что я могу сделать?

<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

Ссылка: http://jsfiddle.net/kNMnr/1487/

Использовать позицию в CSS3 с 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

вы можете предоставить изображению определенный z-индекс в css и установить его положение в абсолютной надежде, которая помогает ...

Answer 3

Атрибут poster указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения.Если это не включено, вместо этого будет использоваться первый кадр видео.

Answer 4

Существует простой атрибут видео, который позволяет использовать предварительно загруженные изображения.

Атрибут "poster" определяет изображение плаката вместо видео.

Answer 5

Похоже, что z-index является проблемой здесь, как предлагает другой пользователь, но просто хотел добавить.Если вы просто хотите отобразить картинку перед видео, вы также можете использовать постер с тегом html5 video.

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