Video script

js

var video_kitchen = $('#video_kitchen');

$('#custom_play_kitchen').on("click", function(){

	$('#video_wrap_kitchen').toggleClass('active');

	if(video_kitchen[0].paused) {
		video_kitchen[0].play();
	}
	else {
		video_kitchen[0].pause();
	}
	return false;

});

if ($(window).width() < 768) {
	$('video').attr('controls', 'true');
}


$('video').on("click", function(){

  	// play pause
    this[this.paused ? 'play' : 'pause']();
  	// play pause

    // if(this.paused) {
    //     this.play();
    // }
    // else {
    //     this.pause();
    // }

});

=======================================================================
	Each video html 5 Yeach !
=======================================================================

<div class="wrapp_video">
    <video style="width: 100%;" loop>
        <source src="media/video/1.mp4" type="video/mp4">
        <source src="media/video/1.webm" type="video/webm">
    </video>
    <button class="btn_video">play\pause</button>
</div>

<div class="wrapp_video">
    <video style="width: 100%;" loop>
        <source src="media/video/1.mp4" type="video/mp4">
        <source src="media/video/1.webm" type="video/webm">
    </video>
    <button class="btn_video">play\pause</button>
</div>

<script>

    $('.btn_video').on('click',function(){

        var $this = $(this),
            videoBox = $this.closest('.wrapp_video'),
            video = $this.closest('.wrapp_video').find("video")[0];


        video[video.paused ? 'play' : 'pause']();

        if(!videoBox.hasClass('pause')){

            videoBox.addClass('pause');

        }
        else{

            videoBox.removeClass('pause');

        }

    });

    $('video').on("click", function(){

        if(this.paused) {
            $(this).closest(".wrapp_video").find('.btn_video').hide()
        }
        else {
            $(this).closest(".wrapp_video").find('.btn_video').show()
        }

        this[this.paused ? 'play' : 'pause']();

    });

</script>