JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div id="js-b2b-video"></div>
<div></div>
<div></div>
<div></div>

CSS

div {
  width: 300px;
  height: 500px;
  background-color: gray;
  margin-bottom: 20px;
}

div#js-b2b-video {
  background-color: green;
}

JavaScript

// On DOM ready, I set the top and bottom offset of the video,
// +/- 30% of the video height

var $video = $('#js-b2b-video');
var videoHeight = $video.outerHeight();
var videoHeight30 = parseInt(videoHeight/3, 10); // Approx. 30% of the video height
var videoObj = {}

videoObj.top = $video.offset().top + videoHeight30; // Approx. 30% from the top of the video
videoObj.bottom = videoObj.top + videoHeight - videoHeight30; // Approx. 30% from the bottom of the video


$(window).on('scroll', function() {
    if ($(window).scrollTop() >= videoObj.top) {
        alert('30% from the top of the video reached');
    }
});