Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video elements need the playsinline attribute to autoplay on iOS #8198

Closed
4 of 5 tasks
Pikamander2 opened this issue May 26, 2019 · 7 comments
Closed
4 of 5 tasks

Video elements need the playsinline attribute to autoplay on iOS #8198

Pikamander2 opened this issue May 26, 2019 · 7 comments

Comments

@Pikamander2
Copy link
Contributor

@Pikamander2 Pikamander2 commented May 26, 2019

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
Copy link
Contributor Author

@Pikamander2 Pikamander2 commented May 26, 2019

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.

Loading

@shilo-ey
Copy link
Collaborator

@shilo-ey shilo-ey commented Jul 9, 2019

This issue has been resolved in Elementor v2.6.0

Feel free to update

Thanks!

Loading

@shilo-ey shilo-ey closed this Jul 9, 2019
@ayhanmalkoc
Copy link

@ayhanmalkoc ayhanmalkoc commented Jul 11, 2019

Hello ,

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

Loading

@Pikamander2
Copy link
Contributor Author

@Pikamander2 Pikamander2 commented Jul 12, 2019

@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.

Loading

@ayhanmalkoc
Copy link

@ayhanmalkoc ayhanmalkoc commented Jul 12, 2019

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
}

}`

Loading

@ruihildt
Copy link

@ruihildt ruihildt commented Sep 19, 2019

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

Loading

@Pikamander2
Copy link
Contributor Author

@Pikamander2 Pikamander2 commented Sep 20, 2019

@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.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants