Question

164

How to add button overLay in Video Tag

rated 0 times [ 167] [ 3] / answers: 1 / hits: 16484 / 9 Years ago, sat, march 14, 2015, 12:00:00

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;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 9 Years ago cartersinceren · Accepted Answer

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; 

}