Tagged: , , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 15, 2021 at 11:36 am #1332928
    spooniverse

    Dear support team,

    I have been searching the forum for a few days now and have not found a satisfactory answer. I would like to use a self-hosted video as background for a color section and also have it play automatically on iOS.

    In the other posts here in the forum it always just says that this is not possible. But that is not quite the truth. Technically this is feasible. The mobile browsers mostly prohibit the autoplay function by default, but you can still activate it if you insert the right parameters:

    <video autoplay loop muted playsinline src="..."></video>

    Some sources:
    https://swarmify.com/blog/how-to-make-an-autoplaying-background-video/
    https://stackoverflow.com/questions/59325257/html5-video-background-not-playing-safari-on-iphone

    Even Apple gives the same information:
    https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari

    Online I found a tutorial how to do it with vimeo videos. You simply add the following supplement to the link to the video:

    ?autoplay=1&muted=1

    It works with Enfold but is not possible for self-hosted videos. My question now is how can I store the appropriate parameters in the code so that the video also runs automatically on iOS? Do you have a corresponding snippet that adds the necessary keywords? Or is something in this direction planned for the future?

    In any case, I look forward to hearing from you and thank you as always for your great support!

    Many greetings,
    Daniel

    December 16, 2021 at 10:00 am #1333067
    Ismael

    Hey spooniverse,

    Thank you for the inquiry.

    You may need to directly add the playsinline attribute in the /enfold/framework/php/function-set-avia-frontend.php file. Look for this code around line 933.

    $output .= "<video class='avia_video' {$image} {$autoplay} {$loop} {$metadata} {$muted} {$controls} id='{$uid}'>";

    Add the attribute in the video element. 

    $output .= "<video class='avia_video' playsinline {$image} {$autoplay} {$loop} {$metadata} {$muted} {$controls} id='{$uid}'>";

    Best regards,
    Ismael

    December 16, 2021 at 1:25 pm #1333122
    spooniverse

    Hey Ismael,

    works perfect. Two questions:

    • Why do I have to make the change in the parent theme? If I try to put it in /enfold-child/framework/php/function-set-avia-frontend.php the changed file is not loaded, the frontend always uses the version of the parent theme? Is there a solution to make the change in child theme? Or can I add the “playsinline” attribute with a script in functions.php?

    • Shouldn’t this be the defalt behaviour if someone is not setting the “Hide video on mobile devices?” to true? If so the user wants the video to play on all devices. Since this is possible it would be nice to have the “playsinline” attribute added in a new update. Or am I wrong?

    All the best,
    Daniel

    December 17, 2021 at 6:08 pm #1333284
    jasonpohl

    Thank you for this timely inquiry @spooniverse. This worked for me as well… once I switched the filetype from .webm to .mp4, which was not supported in Safari.
    Would appreciate a long-term solution in the child theme or functions.php as well.

    – Thanks for the great support of this Enfold theme!

    December 18, 2021 at 4:57 am #1333321
    Ismael

    Hi,

    Thank you for the update.

    We will include the changes in the next version of the theme. There will also be a new filter so that the attribute can be modified if necessary.

    /**
				 * Add playsinline for IOS https://kriesi.at/support/topic/autoplay-on-ios/
				 * Allow to modify if video is hidden on mobile (not done by default because of multiple mobile device selections)
				 * @since 4.8.8.1
				 * @param string $autoplay
				 * @param string|array $video		array(  fileext => file url  )
				 * @param array $attributes
				 * @return string
				 */
				$autoplay = apply_filters( 'avf_html5_autoplay_mobile', "{$autoplay} playsinline", $video, $attributes );
			}

    Best regards,
    Ismael

    December 20, 2021 at 9:48 am #1333505
    spooniverse

    Super fast implementation! I am thrilled. I just installed the new update and deleted my customization before. Runs perfectly as expected. Thanks for the fast support. And an even bigger thank you for the fact that you have already implemented another feature request from me as fast as lightning. You guys are the best.

    In this sense I wish you Merry Christmas and see you soon! Feel free to close this thread.

    Many greetings,
    Daniel

    December 21, 2021 at 1:00 pm #1333635
    Mike

    Hi,
    Glad Ismael could help, Merry Christmas to you also, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Autoplay on iOS’ is closed to new replies.