autoplay video in viewport and pause when out of viewport not working

Hello again,

Me and a co-worker have put together some javascript that would allow video to play on our site when in the viewport and pause the video when you are outside of the viewport: https://codepen.io/trafficdaddy/pen/ExKrpPB

The problem is it appears the videos are being wrapped in mediaelementplayer which appears to be preventing our code to fire correctly.

example of one of our videos in the text block html:
<div id=”myVideo” data-aos=”fade-right” data-aos-duration=”1500″ data-aos-delay=”500″>

[video muted="muted" width="800" mp4="http://maymobilitydev.wpengine.com/wp-content/uploads/2020/09/Masthead_Video_1920x1080.mp4" (hosted on WPengine) type="video/mp4"][/video]

</div>

our JS currently in the functions.php file:

function custom_video_scrolled_script(){
?>
<script>
(function ($) {
var media = $(‘video’).not(“[autoplay=’autoplay’]”);
//for media, you could give your scroll play videos a class if you need to make it more specific. This would play ALL html5 video tags when scrolled too.
var tolerancePixel = 80;

$(document).on(‘scroll’, checkMedia);

function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() – tolerancePixel;

media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;

if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in In brief section above
$(this).get(0).play();
} else {
$(this).get(0).pause();
// $(this).get(0).currentTime = 0;
}
});
}
})(jQuery);
</script>
<?php
}
add_action(‘wp_head’, ‘custom_video_scrolled_script’);

could you advise on the tweaks needed to make this work properly?