Overlay Play Button Over Video

How to overlay a play button over a video thumbnail image?

You can use position: absolute on your .OverlayIcon. For example:

.ImageLink {
    height: 300px;
    width: 350px;
    position: relative;
    display: block;
}
.ItemImage {
    height: 300px;
    width: 350px;
}
.OverlayIcon {
    position: absolute;
    top: 40px;
    left: 65px;
}

Working example: http://jsfiddle.net/shodaburp/9nEua/

Update based on user1788736's first comment

The above solution only works if all the heights are the same and fixed. You'd then need to adjust the top and left values based on the height of your playButton.png dimension.

If you could provide a jsFiddle of what you currently have (html, css, jQuery) then it's easier to adjust the positioning more accurately.

Update based on user1788736's second comment

I uploaded a dummy image on my server that has the same size (56px x 37px). Here's the updated version of your fiddle: http://jsfiddle.net/shodaburp/k6yAQ/1/

Extra info based on user1788736's third comment

When you say "how to find values for overlayicon w and h?" I assume you are actually looking for top and left value for .OverlayIcon. Do correct me if I'm wrong.

First of all, if you don't intend to have a function on your site that enables zooming/enlargment, just stick with px as unit measurement for images.

Based on your jsFiddle thumb dimension, 12em x 10em is equivalent to 192px x 160px.

The formula to get the top and left values for .OverlayIcon is as follows:

OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconTop = ( 160 - 37 ) / 2 = 61.5

(Round to 61 or 62 since we can't have decimal for px)

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68

Play button on video overlay - changing button text

There're 3 things to fix:

you wrote var ctrlVideo = document.getElementById("video");
but in html you use <video id="vid1" controls>.
Change your js to:
var ctrlVideo = document.getElementById("vid1");

set z-index of your button, because now your button is behind the player and you can't press it (if you delete controls in html, you'll notice, that click is not triggered at all):

 button {
 background-color: #666;
 border: medium none;
 color: #fff;
 display: block;
 font-size: 18px;
 left: 0;
 margin: 0 auto;
 padding: 8px 16px;
 position: absolute;
 right: 0;
 top: 50%;
 z-index: 123;

}

line 5: add $ in the beginning $('button')

Also, to make jquery work on jsfiddle, add it in the window with your js code (in the dropdown)

HTML5 Video Play Button Overlay Issue

If you change your JavaScript load type No wrap - in <body> then it works.

JSFiddle

Hide Play Button Overlay on video in iOS 14

You can do this with JQuery. Include it with this:

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

The following code will play the video as soon as the user interacts with their device in any way. This also acts as a workaround for regular safari autoplay issues.

<script type="text/javascript">
$('body').on('click touchstart', function () {
            const videoElement = document.getElementById('videoElement');
            if (!videoElement.playing) {
                videoElement.play();
            }
    });
</script>

You can't trigger video playback without the user interacting with device (this is probably a good thing).

If you'd like to instead completely disable playback when low power mode is enabled (and some of us will thank you greatly), you can do the following:

<script type="text/javascript">
var promise = $('#videoElement').play();

if (promise !== undefined) {
  promise.then(_ => {
   // Autoplay was successful
  }).catch(error => {
   $('#videoElement').remove()
 });

}
</script>

I'll dig some more to see if there's a way to do this with pure CSS, but I doubt it'll be anywhere near as "stable".

How to overlay a play button over a YouTube thumbnail image

<div class="video">
    <img src="thumbnail..." />
    <a href="#">link to video</a>
</div>

css

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 20px;
   left: 20px;
}

I would do something like that. In any case, I don't think it's a good idea to post process the images to add the play button. What if you need to change the button design for instance?

If you want to center the button, a nice way to do it is to set top and left to 50%, and then adding negative margins equal to half of the size of the button:

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -20px;
}