humayunahmed8/floating-video-widget.html

## floating-video-widget.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating YouTube Video Widget</title>
<style>
    /* Styles for the video container */
    /* .video-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    } */

    .video-container {
      height: 70px;
      width: 70px;
      bottom: 20px;
      right: 20px;
      overflow: hidden;
      border-radius: 50%;
      position: fixed;
  }

    /* Styles for the floating video */
    .floating-video {
      position: absolute;
      bottom: -40px;
      right: -38px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      overflow: hidden;
      z-index: 9999;
      transition: width 0.3s, height 0.3s, border-radius 0.3s;
        /* position: fixed;
        bottom: 20px;
        right: 20px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        overflow: hidden;
        z-index: 9999;
        transition: width 0.3s, height 0.3s, border-radius 0.3s; */
    }

    /* Styles to hide YouTube controls */
    .floating-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


</style>
</head>
<body>
<div class="video-container">
    <div class="floating-video" id="floatingVideo">
        <div id="player"></div>
    </div>
</div>

<script>
    // Function to handle scroll event
    function handleScroll() {
        var floatingVideo = document.getElementById("floatingVideo");
        var videoContainer = document.querySelector(".video-container");

        if (window.scrollY > (videoContainer.offsetHeight / 2)) {
            floatingVideo.classList.add("floating");
        } else {
            floatingVideo.classList.remove("floating");
        }
    }

    // Add scroll event listener
    window.addEventListener("scroll", handleScroll);

    // Load YouTube API
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api?key=AIzaSyA_3fJ1j4IlfE-IJ0A3isu0xmX1mVWalLQ';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Function to create YouTube player
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '70px',
            width: '150px',
            videoId: 'u31qwQUeGuM',
            playerVars: {
                'autoplay': 1,
                'controls': 0,
                'disablekb': 1,
                'fs': 0,
                'loop': 1,
                'modestbranding': 1,
                'mute': 1,
                'playsinline': 1,
                'rel': 0,
                'showinfo': 0
            },
            events: {
                'onReady': onPlayerReady,
            }
        });
    }

    // Function to start video playback
    function onPlayerReady(event) {
        event.target.playVideo();
    }


</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Floating YouTube Video Widget</title>
	<style>
	/* Styles for the video container */
	/* .video-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	} */

	.video-container {
	height: 70px;
	width: 70px;
	bottom: 20px;
	right: 20px;
	overflow: hidden;
	border-radius: 50%;
	position: fixed;
	}

	/* Styles for the floating video */
	.floating-video {
	position: absolute;
	bottom: -40px;
	right: -38px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	overflow: hidden;
	z-index: 9999;
	transition: width 0.3s, height 0.3s, border-radius 0.3s;
	/* position: fixed;
	bottom: 20px;
	right: 20px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	overflow: hidden;
	z-index: 9999;
	transition: width 0.3s, height 0.3s, border-radius 0.3s; */
	}

	/* Styles to hide YouTube controls */
	.floating-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}


	</style>
	</head>
	<body>
	<div class="video-container">
	<div class="floating-video" id="floatingVideo">
	<div id="player"></div>
	</div>
	</div>

	<script>
	// Function to handle scroll event
	function handleScroll() {
	var floatingVideo = document.getElementById("floatingVideo");
	var videoContainer = document.querySelector(".video-container");

	if (window.scrollY > (videoContainer.offsetHeight / 2)) {
	floatingVideo.classList.add("floating");
	} else {
	floatingVideo.classList.remove("floating");
	}
	}

	// Add scroll event listener
	window.addEventListener("scroll", handleScroll);

	// Load YouTube API
	var tag = document.createElement('script');
	tag.src = 'https://www.youtube.com/iframe_api?key=AIzaSyA_3fJ1j4IlfE-IJ0A3isu0xmX1mVWalLQ';
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// Function to create YouTube player
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '70px',
	width: '150px',
	videoId: 'u31qwQUeGuM',
	playerVars: {
	'autoplay': 1,
	'controls': 0,
	'disablekb': 1,
	'fs': 0,
	'loop': 1,
	'modestbranding': 1,
	'mute': 1,
	'playsinline': 1,
	'rel': 0,
	'showinfo': 0
	},
	events: {
	'onReady': onPlayerReady,
	}
	});
	}

	// Function to start video playback
	function onPlayerReady(event) {
	event.target.playVideo();
	}


	</script>
	</body>
	</html>