Public Ticket #1660528
Header video NOT playing on IOS devices


  • Michael started the conversation

    PROBLEM: The header video on the home page of our site is not playing on IOS devices. After doing a bit of research it seems that through the restrictions IOS has made, videos do not automatically play. This is so the videos do not consume excessive amounts of  mobile data. 

    SOLUTION (Maybe): The video tag in the theme is missing some tags that allow IOS to play the video. This site here shows and explains the tags but basically outlines that the video:

    • Audio must be muted or the video should not have an audio track
    • Autoplay has to be set
    • Use the playsinline tag, videos will play in the normal browser view instead of going fullscreen (which requires a user interaction).

    As the video we have uploaded does not have audio we can only assume the video isn't playing due to the missing tags.

    Any help is appreciated.

  •  60
    mSupport replied

    Hello there!

    The only good solution for ios and mobiles in general is converting the video to a GIF (no bigger then 3-4mb) and uploading it as the breadcrumb image for the home page. 

    Using video on mobile devices as header it is not recommended because it will be poor for UX. For example imagine someone is accesing your website from an old samsung phone, maybe Galaxy S4, i assure you it will crush with the video. For mobile i recommend to keep it simple, the load speed is crucial on this devices.

    I noticed that you are using a couple of large image like the About header, it is 2mb, maybe work it to be around 800kb, 1mb tops. No image shoul be larger than 1mb. Also use the plugin Super Cache, it will help with the loading speed.

    Let me know!