Trouble with jQuery "playsinline" prop

Support
#1

I’m having trouble and I’m not sure why adding some JS to a page I’m working on that will inject the playsinline property to my background videos so that they will play on iOS. I’ve found a few topics in here with answers, but none of them are working for me. Here is my code:

 jQuery(document).ready(function(){
    jQuery('.x-bg video').prop('playsinline',true); 
 });

I’ve tried adding this in the JS menu for the page in question and I’ve tried adding in a <script defer="defer"> tag in the header, but neither are injecting the playsinline property into my video code. Any tips?

#2

Hello Bobby,

Thanks for writing in!

Your code may have an issue. I would recommend that you update it and use this code instead:

(function($){
  $('.x-bg video').attr('playsinline',''); 
})(jQuery);

For reference:

#3

Thanks, I’ll give it a try and let you know how it goes.

I don’t quite understand the syntax of this, though. Is there a tutorial anywhere on how to use custom JS in the page builder?

#4

Hi Bobby,

The Global JS are will take any valid JS code including Vanilla JS and jQuery code. You just do not need to add the opening and closing <script> tag in there but only the JS codes.

https://www.w3schools.com/jquery/jquery_intro.asp

Hope this helps.

#5

Thanks Jade,

But my question was more about why the code that @RueNel recommended didn’t include a document ready event. Or was that just assumed and I had to supply it?

Code as-is is not working.

#6

So, here is the code I had to use directly in my header, or else it wouldn’t work. I had to defer the script until things were loaded or else the MEJS wouldn’t have fired yet and the video elements wouldn’t yet be on the DOM.

 <script defer="defer">
   jQuery(window).load(function(){
     jQuery('.x-bg video').attr('playsinline',''); 
   });
 </script>

However, I am now running into another problem. I believe that Pro includes some kind of JS to completely disable the video element from playing when on mobile. How can I disable that?

#7

Hello Bobby,

Pro only displays the video. It is browser that controls the video whether to play it automatically or not. Most mobile browsers disable any autoplay video and audio. Please check out this links:

Hope this explains it.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.