$(".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>El video debería reproducirse al hacer clic en cualquier parte de la superposición, pero ahora solo se reproduce al hacer clic en el centro de la superposición. Pero la pausa funciona bien como se esperaba, ya que al hacer clic en cualquier parte del video mientras se reproduce, el video se detiene.
¿Qué hay de hacer que el botón "reproducir" cubra todo el video? Es eso lo que necesita?
$(".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>