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.
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.