Search code examples
javascriptjqueryloopsvideoautoplay

Need to remove loop in autoplay background video jquery


I'm new to jquery and I have a video running in the background of a homepage of a website I'm working on.

The video is on autoplay and is looped but I only want it to play once. I looked online to see how I could remove the loop but could not find any answers.

This is the code:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script><script type="text/javascript">
	$(window).bind("load", function() {
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	} else {
	var banner = $('.sqs-slice-gallery-item > img'),
	height = banner.height(),
	width = banner.width();
	var url = "VIDEO URL HERE";
	banner.hide();
	$('<video class="bannerVideo" width="' + width + 'px" height="' + height + 'px" autoplay loop><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
	adjustBanner($('.bannerVideo'), banner);
	$(window, banner).resize(function() {
	adjustBanner($('.bannerVideo'), banner);
	setTimeout(function() {
	adjustBanner($('.bannerVideo'), banner);
	}, 200);
	});
	}
	function adjustBanner (video, banner) {
	video.css({
	height: banner.css('height'),
	width: banner.css('width'),
	top: banner.css('top'),
	left: banner.css('left'),
	position: 'relative',
	'object-fit': 'inherit'
	});
	}
	});
	</script>

Any help would be greatly appreciated.


Solution

  • Spec here on W3Schools,

    The loop attribute is a boolean attribute.

    When present, it specifies that the video will start over again, every time it is finished.

    Why don't you just remove the loop attribute in your JQuery code ?

    <video class="bannerVideo"autoplay loop> // remove loop
    

    Then it should only play once.