Clicking HTML 5 Video element to play, pause video, breaks play button

The simplest form is to use the onclick listener:

<video height="auto" controls="controls" preload="none" onclick="this.play()">
 <source type="video/mp4" src="vid.mp4">
</video>

No jQuery or complicated Javascript code needed.

Play/Pause can be done with onclick="this.paused ? this.play() : this.pause();".

To keep it from clashing with the video controls on some browsers, call preventDefault on the click event:

onclick="this.paused ? this.play() : this.pause(); arguments[0].preventDefault();"

Demo:

<video height="200" controls="controls" preload="none" onclick="this.play();arguments[0].preventDefault();">
 <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/54/Yawning_kitten.ogv/Yawning_kitten.ogv.480p.vp9.webm">
</video>