Beta 2 | Video Element Autoplay Not Working

Beta
#1

Per usual, I’m sure I’m doing something wrong…

  1. Using the V2 video element.
  2. Self-hosted video
  3. Set to autoplay + loop
  4. Does not autoplay. Requires click.
  5. Once clicked, it does loop.

What am I missing?

#2

Hi @DoncoMarketing,

I’ve taken a look here and it’s working ok for me with various combinations of autoplay + looping. Let me know if there’s a URL I can check for you. One thought is that it could be the browser blocking autoplay.

#3

Please see secure note.

#4

Thanks! I see what you mean. I think this is related to having multiple videos active. Autoplay is triggered when enough of the video is loaded to play it. Because you have multiple videos, they’re all trying to play and when one starts, it stops all the other videos. I’m not sure how we’d solve this officially at the moment, but I can offer two near term solutions

  1. You could setup your videos as backgrounds on a Column or nested Row element. Background videos are handled separately from the standard Video elements and won’t be auto paused.
  2. Use custom HTML. To get box shadow controls, you could put this in a Text element. It could also go in a Content Area element and you can use Element CSS to style it.
<div class="x-frame">
  <div class="x-frame-inner" style="padding-bottom: calc((9 / 16) * 100%);">
    <video muted preload="auto" autoplay>
      <source src="https://sandbox2.doncomarketing.com/wp-content/uploads/2019/10/Pipeline.mp4" type="video/mp4">
    </video>
  </div>
</div>

The inline style lets you configure the frame’s aspect ratio. If you are using 16:9 you can just remove the inline style since that’s the default.