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();});
Set the attribute src in source to a link of your video and specify its type . To create a custom button, you can create a container which contains both the video and the custom button. The button will be position -ed to absolute using CSS to make it appear at the right position in the video (adjusted using CSS).
To add a play button overlay, upload your photo or drag n drop it to the editor. Next, click on the “Icons” tool located at the left sidebar of the editor. Search for the keyword 'play button' and choose from a wide range of icons for your image. After you're done, download the image in multiple file formats.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With