JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div>
	<div class="v_wrapper" id="v_wrapper">
		<div class="sub">
			<iframe width="1000" height="500" src="https://www.youtube.com/embed/Y0mL5KRNZ2M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
		</div>		
	</div>
	<div style="height:2000px;"></div>
</div>

CSS

.v_wrapper, .v_wrapper iframe {
	width:1000px;
	height: 500px;
}
.v_wrapper .sub.fly {
	position:fixed;
	left:10px;
	bottom:10px;
	width:600px;
	height:400px;
}
.v_wrapper .sub.fly iframe {
	width:600px;
	height:400px;
}

JavaScript

$(document).ready(function() {
	var scroll_pos = 0;
	$(document).scroll(function() {
		scroll_pos = $(this).scrollTop();
		var element1 = $('#v_wrapper').offset().top + $('#v_wrapper').height();
		if (scroll_pos > element1) {
			$('#v_wrapper .sub').addClass("fly");
		} else {
			$('#v_wrapper .sub').removeClass("fly");
		}
	});
});