Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 11, 2018 at 6:16 pm #1043902
    Vicky Blease

    Hello,

    I have found a number of threads offering workarounds to display a video element on a mobile display in place of a fullscreen slider. This doesn’t work for us. We have a fullsreeen slider on our homepage with 4 slides, one of which contains a video background hosted on Vimeo. We need to display all 4 slides on mobile, and we need to display the video on mobile.

    Please advise where in the code this is disabled so I can override in a child theme? It shouldn’t be for you guys to dictate whether this content is displayed or not? Rather let the user decide through their own device controls.

    Thank you,

    Vicky

    December 17, 2018 at 4:23 am #1046133
    Ismael

    Hey Vicky,

    Thank you for using Enfold.

    According to the webkit documentation, the “playsinline” attribute allows videos to autoplay on mobile devices as long as the said videos are muted. Unfortunately, I am not sure if this is going to work for Android devices. It is also not applicable for vimeo videos because they have their own video player. You have to convert it to mp4, webm or ogv and modify the framework > php > avia-function-set-avia-frontend.php file. Look for this code around line 626:

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

    Add the “playsinline” attribute or replace the code with:

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

    Make sure that the video is muted.

    Or use the Layer Slider plugin if you don’t want go through all of that. Create a layer and set the video as background.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.