<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div class="videoPop">
<div class="point"></div>
<iframe width="440" height="245"
src="https://www.youtube.com/embed/fj984wXo3O8?autoplay=1&controls=0&disablekb=1&modestbranding=1&rel=0&loop=1'
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope">
</iframe>
</div>
<script>
window.onload = function () {
var bsDiv = document.querySelector(".videoPop");
var x, y;
window.addEventListener("mousemove", function (event) {
x = event.clientX;//-217
y = event.clientY - 165;//-280
if (typeof x !== "undefined") {
bsDiv.style.left = x + "px";
bsDiv.style.top = y + "px";
}
}, false);
}
</script>
<style>
.videoPop {
background-color: #3b3b3b;
border-radius: 0px;
position: fixed;
border-radius: 10px;
width: 440px;
height: 245px;
z-index: 200;
border: 5px solid #3b3b3b;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.videoPop:after {
content: '';
position: absolute;
top: 100%;
left: 55%;
margin-left: -55px;
width: 0;
height: 0;
border-top: solid 30px #3b3b3b;
border-left: solid 30px transparent;
border-right: solid 30px transparent;
}
.videoPopLoading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
}
iframe {
border-radius: 5px;
}
</style>
</body>
</html>The YouTube video within the div element follows the user's cursor as it plays. However, I prefer for the video to remain within the boundaries of the window innerHeight and innerWidth, sticking without extending beyond while continuing to follow the cursor until necessary.
This functionality is achieved using pure JavaScript, without utilizing JQuery or other libraries.