3

I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.

Example Sites:

https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/

I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.

Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.

<script type="text/javascript">
   jQuery(function($) {
      $(window).load(function(){
         $('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
         $('#widget2').play();
      });
   });
</script>
Brandon Vreeman
  • 53
  • 1
  • 6

1 Answers1

0

I think there's two parts of the WPBakery plugin's video background not working properly.

  • Video's with a Youtube-embed link are not working properly.
  • Video's stop autoplaying when using the same URL.

The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX

The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:

 function startVideo() {​​​​​​​
    const date = $('.video-wrapper').data('date');
    let src = $('.video-wrapper iframe').attr('src');
    src = src + '&autoplay=1&randomVar=' + date;
    $('.video-wrapper iframe').attr('src', src);
 }​​​​​​​

This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.

Hope this is of any help!

Sem
  • 56
  • 5