-1

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.

Mrs. B
  • 19
  • 3

1 Answers1

0

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.

user3241019
  • 811
  • 9
  • 20