$(".video")
.parent()
.click(function () {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
$("video").attr("controls", true);
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
$("video").attr("controls", false);
}
});.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:50px;
height:50px;
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>Video should play on clicking any part of the overlay, but now it is playing only on clicking at the center of the overlay. But pause is working fine as expected as by clicking on any part of the video while it is playing, the video gets paused
What about making the "play" button cover the whole video? Is that what you need?
$(".video")
.parent()
.click(function () {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
$("video").attr("controls", true);
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
$("video").attr("controls", false);
}
});.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:100%;
height:100%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:20%;
background-position: center;
border : green dashed 2px;
}<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>