JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" tabindex="0" autobuffer="autobuffer" controls preload="preload">
  <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://sprintart.com/reach-local/video/new-local.webm"></source>
  <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://sprintart.com/reach-local/video/new-local.ogv"></source>
  <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://sprintart.com/reach-local/video/new-local.mp4"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>
<div id="afterContent">
    This is the div with the content.
</div>

CSS

html,body{
    margin:0;
    padding:0;
}
#afterContent{
    position:relative;
    top:100vh;
}

JavaScript

window.addEventListener('load',function(){
	var video = document.getElementById('video');
    var element = document.getElementById('afterContent');
    video.onended = function(){
    	//the video ended
        //get the distance between the element and the top of the document.
        var scrollDistance = document.body.scrollTop;
        var elemRect = element.getBoundingClientRect();
        var elemOffsetViewportDistance = elemRect.top;
        var totalOffset = scrollDistance+elemOffsetViewportDistance;
        window.scrollTo(0,totalOffset);
    };
});