jquery - Video wont play after first time playing

Question

I have been trying to connect the dots for days but due to lack of my knowledge in positioning and jQuery . I am making code a mess. I am trying to play video on click on there icons. I find these problem with my code

1. The code works for the first time but after the video is closed. I cannot click to play again or another one.
2. The play button isn't responsive, it overlap the text when in mobile view, whereas i want it to static but be responsive
3. Due to the button position, in center from top and left, the left 50% has made horizontal scroll bar appear.

As i intend to use same jQuery code on other pages and same purpose, can i make it smarter and not write all code or copy paste again? Following is the code and here is the codepen

$(document).ready(function() {
    $(".netball-intro").click(function() {
    //jQuery(".sports-video").css("display", "block")
    //jQuery("#bgvid").toggleClass("is-not-active");
    $(".fullscreen").toggleClass("is-video-active");
    $("#netball-intro").get(0).play();
            $(".fullscreen").click(function(){
            $(this).addClass('hidden');
            });
        });

    $(".interview").click(function() {
    //jQuery(".sports-video").css("display", "block")
    //jQuery("#bgvid").toggleClass("is-not-active");
    $(".fullscreen").toggleClass("is-video-active");
    $(".interview").get(0).play();
            $(".fullscreen").click(function(){
            $(this).addClass('hidden');
            });
        });
    });

Answer 1

If you're using jQuery on other pages, I presume you are also using HTML. I believe I've done a similar thing with HTML with the .click method and also "controls loop" with...

<video width="320" height="240" controls loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

This would continually loop after the button is clicked, and should disappear.