Overlay Play button over video

Question

I currently have a script that plays and pauses a video onclick. What I would like to do is overlay a play button over the video at the start and when it is paused, and for that same button to disappear when the video plays again.

Any suggestions would be appreciated.

HTML

<video class="video"><source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4">
</video>

CSS

.video {
width: 50%;
border: 1px solid black;
}

JS

// Plays and pauses video on click

$('.video').click(function(){this.paused?this.play():this.pause();});

score 34 · Answer 1 · edited May 19 '15 at 06:04

If you want to have an actual overlay with content you could edit, maybe this will suit you: https://jsfiddle.net/svArtist/9ewogtwL/

$('.video').parent().click(function () {
    if($(this).children(".video").get(0).paused){
        $(this).children(".video").get(0).play();
        $(this).children(".playpause").fadeOut();
    }else{
       $(this).children(".video").get(0).pause();
        $(this).children(".playpause").fadeIn();
    }
});

.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper{
    display:table;
    width:auto;
    position:relative;
    width:50%;
}
.playpause {
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat:no-repeat;
    width:50%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <video class="video">
        <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

this works very nicely on the desktop, but the HTML5 player on the iPhone already overlays a play-button, and this manually created one overlays it and renders it inactive... — Tilo, Mar 17 '17 at 06:22

Vishal Kumar Sahu · Answer 2 · 2022-07-17T18:36:25.213

0

Create a overlay
Bind play pause event and toggle class as per video state
Use jQuery .toggle() to hide the overlay when clicked and trigger the play bound event

edited Jul 17 '22 at 18:36

answered Sep 26 '16 at 14:10

Vishal Kumar Sahu

1,232
3
15
27

1

A simple example would help. – Apr 23 '22 at 02:09

score -2 · Answer 3 · answered May 18 '15 at 17:51

-2

I think I will only need to explain this.

when .video is clicked and the video is paused ->
.video{visibility: hidden;}
when .video is clicked and the video is running ->
.video{visibility: visible;}

If you want more code, please comment

answered May 18 '15 at 17:51

Julian Avar

476
1
5
24

Overlay Play button over video

3 Answers3

Linked