Video elements need the playsinline attribute to autoplay on iOS

[Pikamander2]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

Videos won't autoplay on iOS due to the video elements not having the playsinline attribute.

There doesn't appear to be an easy way for the user to add it either.

For that reason, one of the following options would be helpful:

• Adding the playsinline attribute to the videos by default

• Adding a checkbox to let the user toggle whether the video has the playsinline attribute

• Allowing the user to add custom attributes to the videos (and perhaps other elements as well)

Steps to reproduce

1. Create an autoplaying video with Elementor

2. Try it on iOS

3. Note that it doesn't autoplay due to Apple's strict rules.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

Environment

It happens on any environment.

[Pikamander2]

There appear to be one or two previous threads related to this issue, but they seem to be old and closed and don't suggest fixes:

#6078

#3442

The quickest fix would just be to add the playsinline attribute to background videos by default. That would be a lot simpler than the alternatives. I've submitted that change below.

[shilo-ey]

This issue has been resolved in Elementor v2.6.0

Feel free to update

Thanks!

[ayhanmalkoc]

Hello ,

html "video" element, playsinline has not been added. at least now I'm using elementor 2.6.0.

[Pikamander2]

@ayhanmalkoc - Do you have a link to the page by chance?

I only added it to the background videos, so it's possible that some other part of the code is missing it.

[ayhanmalkoc]

Hi, I'm checking the background video but no code has been added. widget added to manual for video.php.
Also, how can I add playsinline to video widget lightbox?

`/**
*
* @SInCE 2.1.0
* @access private
*/
private function render_hosted_video() {
$video_url = $this->get_hosted_video_url();
if ( empty( $video_url ) ) {
return;
}

	$video_params = $this->get_hosted_params();
	?>
	<video **playsinline** class="elementor-video" src="<?php echo esc_url( $video_url ); ?>" <?php echo Utils::render_html_attributes( $video_params ); ?>></video>
	<?php
}

}`

[ruihildt]

@Pikamander2 Is there a reason this is only added to the background video and not at the same time to the video element itself?

[Pikamander2]

@ruihildt - Mostly it was because that's all I needed to fix a bug on a client's website. The playsinline attribute might belong elsewhere as well, but that was enough to fix our immediate issue.

That said, according to the MDN page:

playsinline: A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

So I'm not sure that it would appropriate to add it to all of Elementor's videos. It would be nice to have it as a dropdown option, though. You could try submitting a feature request with your use case in a separate issue.

[drewclifton]

This issue has been resolved in Elementor v2.6.0

Feel free to update

Thanks!

Hi @shilo-ey ! Thanks for your response on this. May I ask in what way this has been resolved? My video widget code in the inspector literally says playsinline=0 (and behaves as such) in Version 3.6.8, e.g.:

<iframe class="elementor-video" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="My Title" width="640" height="360" src="https://www.youtube.com/embed/xxxxxxx?controls=0&amp;rel=0&amp;playsinline=0&amp;modestbranding=0&amp;autoplay=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fmy.site&amp;widgetid=1" id="widget2"></iframe>

And there is no control in widget settings to adjust.

Thanks again.

[web-centric]

Video does not load until press play button in (safari browsers) IOS & Mac. Using Latest versions of Elementor & Elementor Pro, I have reported this issue more than 10 times to support and they couldn't help. Really disappointed.

[collectifweb]

Same problem here.