How to add video html5 “controls” on click ? (jquery)

I’m trying to code my own website, fully handmade but i have a small issue. I would like to add on my website few html5 videos with the basic player.

To hide the controls, and make something clean, I added a quick js script so : when the user clicks on the thumbnail (the poster of the video), the video starts. However, I would’ve liked to add to that, when the user clicks, it also add the controls attributes of the video in question to be able to use the fullscreen or advance in the video.

So, here is my script for now :

        jQuery( document ).ready(function($) {
            $('.myHTMLvideo').click(function() {
                this.paused ? this.play() : this.pause();
            });
        });

And then, I would like that when “onclick”, we add the attribute controls in my to be able to play with the video, and when I click again, it can potentially disappear.

I had already tried a previous script, but when I clicked on a video, it displayed the controls on all my videos on the same page…

Let me know what is the best option for you guys …
And thanks for you help, of course !