0

I'm modifying a bit of code I found here from this question. I am trying to get it working now for multiple instances of a video. This is the only way I can get it working but I would like to make it work for each instance that there is a video which changes on each page this applies on.

$( function() {
  const bgv = $('.bgvid');
  $('source', bgv).each(function() {
    const el = $(this);
    el.attr('src', el.data('src'));
  });
  bgv[0].load();
  bgv[1].load();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>

I have tried putting it within a loop like this instead of the bgv[0].load(); but it didn't work:

$('.bgvid').each(function(){ 
$(this).load();
});
Jarrad Spring
  • 3
  • 2

1 Answers1

0

Just call this.load(), don't convert the DOM element into a jQuery element.

$( function() {
  const bgv = $('.bgvid');
  $('source', bgv).each(function() {
    const el = $(this);
    el.attr('src', el.data('src'));
  });

  bgv.each(function() {
    this.load();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
Samathingamajig
  • 11,839
  • 3
  • 12
  • 34
  • Mate!!! You are a hero!! Thanks heaps! :D I didn't know there was a difference cos I thought that variable was already a Jquery Element :S No idea why I didn't try this but you are an absolute legend!! – Jarrad Spring Jul 27 '22 at 03:34
  • Some insight of how i figured out this was the solution: i used `console.log(bgv, bgv[0], bgv[1])` to see what the values were with the indexed execution, and then realized that since `bgv[i]` returns a DOM element, and jQuery has a [completely different load function](https://api.jquery.com/load/), i tried not converting to a jQuery element (not doing `$(this)` and it worked – Samathingamajig Jul 27 '22 at 03:43
  • Genius!!! I also did the same and was confused by the result and didn't know what it meant but thanks for giving me that extra insight so I'll know that it's a DOM element next time and that it needs to be treated differently with load. Thanks also for the link! That makes heaps of sense why it wasn't working for me haha! – Jarrad Spring Jul 27 '22 at 04:09