How to add button overLay in Video Tag [duplicate]

Question

I appended a div within video tag and used following CSS but it is not working. I already incorported javascript to play/stop video on click. I want to show a button in the middle of player. Something like this

#player_buttons
{
    width: 128px;
    height: 128px;
    z-index: 99;
    background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
}

Answer 1

I don't think you can/should place content inside a video-element other than video-sources unless you want that content displayed in browsers that do not support the video-tag. Taken from the specs:

Content may be provided inside the video element; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents

http://dev.w3.org/html5/spec-author-view/video.html#video

But by wrapping the video element with a container and appending the overlay-div to that container, you can stack them via position:absolute and z-index.

You can see the example here: http://jsfiddle.net/vtrzmf92/

Updated HTML:

<div class="container">
    <video src="#" width="800" height="600"></video>
    <div class="player-buttons"></div>
</div>

Updated CSS:

.container{
    position: relative;
}

.container>.player-buttons{
    background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    height: 128px;
    left: 50%;
    margin: -64px 0 0 -64px;
    position: absolute;
    top: 50%;
    width: 128px;
    z-index: 1; 
}