How can I add click-to-play to my HTML5 videos without interfering with native controls?

Question

I\'m using the following code to add click-to-play functionality to HTML5 video:

$(\'video\').click(function() {
  if ($(this).get(0).paused) {
    $(this).g         


        

Answer 1

Great answers here. Thank you for these. Here's a trick I figured out for making controls clickable, all jQuery.

$('#video_player').click(function(e){

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    {
        //$(this).get(0).play();
        //... what else?
    }

});