How can I make a video open and play on a .click with jQuery?

Question

I'm trying to get a video to open and play using jQuery with the .click function. I've seen this done on various sites, where there's a play button on a section of the website, and when it's clicked, the rest of the site sort of dims, and the video player open's up, and the video plays. I want to implement this on my site, but I'm not sure how to proceed. Any help would sincerely be appreciated. Thanks!

<a class="playBtn" href="#"><i class="fa fa-play-circel fa-3x" aira-hidden="true"></i></a> <!--Is the button I want to use to activate the video.-->
<script>
    $(document).ready(function() {
            $(".playBtn").click(function(){

            });
        });
    </script>

Answer 1

Here's a simplified demo of what you need:

$( document ).ready(function($) {
    $('#playButton').click(function() {
        $('#myVideo')[0].paused ? $('#myVideo')[0].play() : $('#myVideo')[0].pause();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4"  type="video/mp4">
Your browser does not support the video tag.
</video> 
<br>
<button id="playButton">Play / Pause</button>