JSFiddle - React, Tailwind, and code Playground

by Rachel Gallen

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal-content">
        <div class="modal-body">
            <video loop="loop" id="mainVideo" preload="none" controls width="100%">

                <source src="video/video-home.ogv" type="video/ogg">
                <source src="video/video-home.webm" type="video/webm">
                <source src="http://www.rachelgallen.com/nature.mp4" type="video/mp4">

            </video>


        </div>
</div>

JavaScript

$("video").click(function(e){

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if(clickY > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();

    });