Youtube iOS (iPhone and iPad) compatibility issue

This topic has 4 replies, 3 voices, and was last updated 8 years, 7 months ago ago by Jack Richardson

  • Avatar: zf
    zf
    Participant
    September 17, 2015 at 14:09

    Hi Guys, I seem to be having a strange “problem” with embedded Youtube videos and any iOS devices.
    What is happening is that embedded youtube videos do not play on any of these devices. I have done some digging and come accross this link – It seems like this is quite a common issue with different solutions.

    I have Nex – Forms running on all my pages of the site and have tried disabling the forms and video then plays. However this is not an option for me as the forms are an integral part of the sites structure.

    It seems that a second alternative may work where we remove “webkit-tap-highlight-color” from the css. That may work as most browsers run mobile web-kit. What i need to know is that what impact would it have if any on the theme if we do comment this out of the code.

    N.B – Strangely enough it seems to work on Android devices.

    Links in Private content

    Thank You

    Please, contact administrator
    for this information.
    3 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    September 17, 2015 at 14:43

    Hello,

    Please refer to this article:
    http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

    Displaying the fullscreen background video on mobile devices presents several challenges:

    Most mobile platforms (iOS in particular) will refuse to autoplay HTML5 video to avoid potentially ruinous data charges.
    In such cases the video will be displayed with an embedded play button, which in turn…
    …may capture touches on the device, locking out links that may be in the content on top of the video.
    While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background.

    Removing class “webkit-tap-highlight-color” will disable highlight of a tapped link.

    Regards,
    Eva Kemp.

    Avatar: zf
    zf
    Participant
    September 22, 2015 at 13:35

    Hi Eva, i think you may have misunderstood my query. The videos are not using any plugin.
    All videos are embedded youtube videos. Normal size 555×312 and not full screen, they do not play at all on iOS devices i.e iPad and iPhone. The videos are also not set to autoplay – they are all click to play via youtube embed.

    Please advise and apologies for not explaining clearly the last time around/

    Thank you

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 22, 2015 at 15:23

    Hello,

    Sorry, but this bug isn’t related to the theme. We recommend you to try one of the solutions described in the page you provided.

    Best regards,
    Jack Richardson.

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.