this script piece is horribly setup and needs refactoring. It loops through the videos on the page and plays them when they come into view. the "view" is a certain section of the viewport to allow for some tolerance.

inview-stuff.html

<style>
    
    video { 
       width:100%!important;
        padding-right
       max-width:1200px!important;
       height:auto!important;
       -webkit-box-shadow: 0 40px 80px 0 rgba(0, 0, 0, .2);
       -moz-box-shadow: 0 40px 80px 0 rgba(0, 0, 0, .2);
       box-shadow: 0 40px 80px 0 rgba(0, 0, 0, .2);
    }
    video.left {
        padding-left: 50px;
    }
    video.right {
        padding-right: 50px;
    }
    @media (max-width: 767px) {
        video.right,
        video.left {
            padding: 0;
        }
    }
</style>
<script>
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("jquery"),require("window")):"function"==typeof define&&define.amd?define("isInViewport",["jquery","window"],n):n(e.$,e.window)}(this,function(e,n){"use strict";function t(n){var t=this;if(1===arguments.length&&"function"==typeof n&&(n=[n]),!(n instanceof Array))throw new SyntaxError("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions");return n.forEach(function(n){"function"!=typeof n?(console.warn("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions"),console.warn("isInViewport: Ignoring non-function values in array and moving on")):[].slice.call(t).forEach(function(t){return n.call(e(t))})}),this}function o(n){var t=e("<div></div>").css({width:"100%"});n.append(t);var o=n.width()-t.width();return t.remove(),o}function r(t,i){var a=t.getBoundingClientRect(),u=a.top,c=a.bottom,f=a.left,l=a.right,d=e.extend({tolerance:0,viewport:n},i),s=!1,p=d.viewport.jquery?d.viewport:e(d.viewport);p.length||(console.warn("isInViewport: The viewport selector you have provided matches no element on page."),console.warn("isInViewport: Defaulting to viewport as window"),p=e(n));var w=p.height(),h=p.width(),v=p[0].toString();if(p[0]!==n&&"[object Window]"!==v&&"[object DOMWindow]"!==v){var g=p[0].getBoundingClientRect();u-=g.top,c-=g.top,f-=g.left,l-=g.left,r.scrollBarWidth=r.scrollBarWidth||o(p),h-=r.scrollBarWidth}return d.tolerance=~~Math.round(parseFloat(d.tolerance)),d.tolerance<0&&(d.tolerance=w+d.tolerance),l<=0||f>=h?s:s=d.tolerance?u<=d.tolerance&&c>=d.tolerance:c>0&&u<=w}function i(n){if(n){var t=n.split(",");return 1===t.length&&isNaN(t[0])&&(t[1]=t[0],t[0]=void 0),{tolerance:t[0]?t[0].trim():void 0,viewport:t[1]?e(t[1].trim()):void 0}}return{}}e="default"in e?e.default:e,n="default"in n?n.default:n,/**
 * @author  Mudit Ameta
 * @license https://github.com/zeusdeux/isInViewport/blob/master/license.md MIT
 */
e.extend(e.expr[":"],{"in-viewport":e.expr.createPseudo?e.expr.createPseudo(function(e){return function(n){return r(n,i(e))}}):function(e,n,t){return r(e,i(t[3]))}}),e.fn.isInViewport=function(e){return this.filter(function(n,t){return r(t,e)})},e.fn.run=t});
</script>
<script>
    
    var video_tolerance = $(window).height() * .5;
    
    
//    console.log('viewport height: '+$(window).height(), 'video_tolerance: '+video_tolerance)
    var videoList = [];
    var scrollPauseList = [];
    var clickedPauseList = [];

    var myScrollFunc = function() {

        $('video').each(function(){ 
            var current_video_id = $(this).attr('id')
//            var inView = $(this).isInViewport({ tolerance: video_tolerance }); //is(":in-viewport");
            var inView = $(this).isInViewport(); //is(":in-viewport");
//            console.log(this.id)
//            debugger;
//            console.log(inView);
//            console.log(inView.length);
//            console.log($(inView).length);
//            console.log(inView.attr('id'))
//            console.log(inView[0].attr('id'))
//            debugger;
            var isPaused = $(this)[0].paused;
            var playerIdx = videoList.indexOf(this.id);
            var scrollPaused = scrollPauseList[playerIdx];
            var clickPaused = clickedPauseList[playerIdx];

            if (this.id == inView.attr('id')) {   
                
                var hasEnded = $(this)[0].ended;
                var curTime = $(this)[0].currentTime;
                var hasStarted = curTime > 0;
                if((hasStarted && !hasEnded && !clickPaused) || !hasStarted) {
                    inView[0].play();
                    scrollPauseList[playerIdx] = false;
//                    $(this).parent().css('background', 'green')
                    
                } 
            } else if(!isPaused) {                      
                scrollPauseList[playerIdx] = true;
                $(this)[0].pause();
//                $(this).parent().css('background', 'red')
            }
        });
    };      

    $(window).scroll(myScrollFunc);     

$(document).ready(function() {
    console.log('dom ready now nick')
   $('video').parent().css('background', 'red')
//    $('#overlay').css('position', 'fixed').css('width', '100%').css('top', 0).css('left', 0).css('right', 0).css('height', video_tolerance+'px').css('background', 'rgba(0,0,0,0.5)').css('z-index', 1000000)
    $('video').each(function(){ 
        videoList[videoList.length] = this.id;
        console.log(this.id)
        scrollPauseList[scrollPauseList.length] = false;
        clickedPauseList[scrollPauseList.length] = false;
    }); 

});

</script>