// HTML Code
<div class="home-video">
	<div class="hp-video-container">
		<div class="slideshow-container">
			<!-- <div class="mySlides fade">
				<video loop muted autoplay playsinline class="fullscreen-bg__video">
					<source src="https://static-trailercentral.s3.amazonaws.com/videos/LUND23_W2F_Pre-roll_15_16x9_FINAL-1920.mp4" type="video/mp4">
				</video>
			</div> -->
			<div class="mySlides fade" style="opacity: 0;">
				<video loop="" muted="" autoplay="" playsinline="" class="fullscreen-bg__video">
					<source src="https://static-trailercentral.s3.amazonaws.com/videos/ben-my23-homepage-video-desktop.mp4" type="video/mp4">
				</video>
			</div>
			<div class="mySlides fade" style="opacity: 1;">
				<video loop="" muted="" autoplay="" playsinline="" class="fullscreen-bg__video">
					<source src="https://static-trailercentral.s3.amazonaws.com/videos/macdonaldmarineinc_5.mp4" type="video/mp4">
				</video>
			</div>

			
			<div class="mySlides fade" style="opacity: 0;">
				<video loop="" muted="" autoplay="" playsinline="" class="fullscreen-bg__video">
					<source src="https://static-trailercentral.s3.amazonaws.com/videos/MY2024-B2.mp4" type="video/mp4">
				</video>
			</div>
			
			<a class="prev" onclick="plusSlides(-1)">❮</a>
			<a class="next" onclick="plusSlides(1)">❯</a>
            
            <!-- <div class="dot-container">
				<span class="dot" onclick="currentSlide(1)"></span>
				<span class="dot" onclick="currentSlide(2)"></span>
				<span class="dot" onclick="currentSlide(3)"></span>
				<span class="dot" onclick="currentSlide(4)"></span>
				<span class="dot" onclick="currentSlide(5)"></span>
			</div> -->
		</div>
	</div>
	<script type="text/javascript">
		document.querySelector('.fullscreen-bg__video').playbackRate = 1;

		var slideIndex = 1;
			var myTimer;
			var slideshowContainer;
			window.addEventListener("load", function () {
				showSlides(slideIndex);
				myTimer = setInterval(function () {
					(1);
				}, 15000);
			//UNCOMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
				slideshowContainer = document.getElementsByClassName("slideshow-container")[0];
			slideshowContainer.addEventListener("mouseenter", pause);
			slideshowContainer.addEventListener("mouseleave", resume);
			});
			// NEXT AND PREVIOUS CONTROL
			function plusSlides(n) {
				clearInterval(myTimer);
				if (n < 0) {
					showSlides((slideIndex -= 1));
				} else {
					showSlides((slideIndex += 1));
				}
				//COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
				if (n === -1) {
					myTimer = setInterval(function () {
						plusSlides(n + 2);
					}, 15000);
				} else {
					myTimer = setInterval(function () {
						plusSlides(n + 1);
					}, 15000);
				}
			}
			//Controls the current slide and resets interval if needed
			function currentSlide(n) {
				clearInterval(myTimer);
				myTimer = setInterval(function () {
					plusSlides(n + 1);
				}, 15000);
				showSlides((slideIndex = n));
			}


			var current = 0,
				slides = document.getElementsByClassName("mySlides");

			setInterval(function() {
			  for (var i = 0; i < slides.length; i++) {
				slides[i].style.opacity = 0;
			  }
			  current = (current != slides.length - 1) ? current + 1 : 0;
			  slides[current].style.opacity = 1;
			}, 15000);


			function showSlides(n) {
				var i;
				var slides = document.getElementsByClassName("mySlides");
				var dots = document.getElementsByClassName("dot");
				if (n > slides.length) {
					slideIndex = 1;
				}
				if (n < 1) {
					slideIndex = slides.length;
				}
				for (i = 0; i < slides.length; i++) {
					slides[i].style.opacity = 0;
				}
				for (i = 0; i < dots.length; i++) {
					dots[i].className = dots[i].className.replace(" active", "");
				}
				slides[slideIndex - 1].style.opacity = 1;
				// dots[slideIndex - 1].className += " active";
			}
			pause = () => {
				clearInterval(myTimer);
			};
			resume = () => {
				clearInterval(myTimer);
				myTimer = setInterval(function () {
					plusSlides(slideIndex);
				}, 15000);
			};
	</script>
</div>

// SCSS
.home-video{
            position: relative;
            overflow: hidden;
            .hp-video-container{
                width: 100%;
                text-align: center;
                .slideshow-container{
                    width: 100%;
                    height: 50vw;
                    position: relative;
                    margin: auto;
                    background-color: #000;
                }
            }
            .mySlides{
                position: absolute;
                -webkit-transition: opacity .5s ease-in;
                transition: opacity .5s ease-in;
                width: 100%;
                height: 100%;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                &+.mySlides{
                    opacity: 0;
                }
            }
            .prev, .next{
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: auto;
                padding: 10px 15px;
                color: white;
                font-weight: bold;
                font-size: 18px;
                -webkit-transition: 0.6s ease;
                transition: 0.6s ease;
                border-radius: 2px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transform: translatey(-50%);
                -ms-transform: translatey(-50%);
                transform: translatey(-50%);
                z-index: 9;
                -webkit-filter: drop-shadow(0px 4px 6px black);
                filter: drop-shadow(0px 4px 6px black);
            }
            .prev{ left: 0; }
            .next{ right: 0; }
            video{
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }