JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tv_container">
<video width="245" height="240" autoplay loop id="vid1">
<source src="../snapchat/wp-content/uploads/2016/02/Snapchat%20Video%20main.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>
</div>

CSS

#tv_container {
    width: 360px; 
    height: 800px; 
    position: relative;
}
#tv_container:after{
    content: '';
    display: block;
  background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    /*position: absolute;*/
    z-index: -10;
}
#tv_container video {
    position: absolute;
    /*top: 30px; */
    left: 40px; 
    z-index: 5;
}

video {
    width: 240px;
    height: 600px;
}

JavaScript

var bindScroll = function(ele, evt, fcn) {
        ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
    }
var scrollPos = function() {
        var doc = document.documentElement;
        return {
            'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0), 
            'top': (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
        };
    }    
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
        var diff = playerOffset - scrollPos().top;
        var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
        return diff > -100 && diff < adjust;        
    }
    var checker = null;
 
bindScroll(window, 'scroll', function(e) {
    clearTimeout(checker);
    if(!scrollPlayed && playerInView()) {
        checker = setTimeout(function() {
            vid1.play(true);
            scrollPlayed = true;            
        }, 100);
    }    
});