WordPress.org

Ready to get started?Download WordPress

Forums

WP YouTube Lyte
[resolved] Audio embed is a black bar on iPhone (9 posts)

  1. stevygee1987
    Member
    Posted 1 year ago #

    Hi,
    I'm currently working on a site that is also meant to be viewed on mobile devices. The client wants YouTube embeds for audio only, which is why I'm using your plugin.

    On an iPhone the audio embed is just a black bar, with no play button visible. When tapping on it, the video opens and starts playing properly. But it would be great if the user could see the play button! It works fine on my desktop.

    http://wordpress.org/plugins/wp-youtube-lyte/

  2. stevygee1987
    Member
    Posted 1 year ago #

    Video embeds look fine on the iPhone btw.

  3. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    hmmm, iphone + audio, that's a combination of edge cases ;-)

    I have an idea of what might be causing this, I'll experiment some the next couple of days and let you know if & how we can solve this.

  4. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    Well, turns out there's no bug in my code after all; the problem is that YouTube does not show the bottom controls at all on mobile (both iOS and Android). This is not a huge deal for normal video's, but does break the (frowned upon, as in not really allowed by the YT TOS) audio-only embeds.

    I've created a ticket at YT's official support-group on stack overflow to see if/ how I can force the controls to be visible anyhow.

    Let's see where that leads us. Thanks for reporting anyhow, I wouldn't have easily spotted this issue myself.

  5. stevygee1987
    Member
    Posted 1 year ago #

    Hi, thanks for looking into it!

    Is there I way that I could force an audio embed to open as full video under certain conditions? Like when a mobile platform is detected?

  6. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    sure; in lyte(-min).js you'd have to replace

    if (tH.className.indexOf("audio") !== -1) { qsa+="&autohide=0";aHgh="438";aSt="position:relative;top:-400px;" } else { aHgh=tH.clientHeight;aSt=""; }

    on line 65 by

    if ((tH.className.indexOf("audio") !== -1) && (aP == 1)) {
            qsa+="&autohide=0";aHgh="438";aSt="position:relative;top:-400px;"
        } else if ((tH.className.indexOf("audio") !== -1) && (aP == 0)) {
            tH.parentNode.style.height="";
            tH.style.height="";
            aHgh=tH.clientHeight;
            aSt="height:"+aHgh+"px !important;";
        } else {
            aHgh=tH.clientHeight;aSt="";
        }

    a bit of a hack, but that's what you get with combinations of edge-cases ;-)

  7. stevygee1987
    Member
    Posted 1 year ago #

    works perfectly, thanks!

  8. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    thanks for the confirmation, I'll probably release 1.3.1 with this specific workaround somewhere tomorrow.

  9. Frank Goossens
    Member
    Plugin Author

    Posted 1 year ago #

    so that's 1.3.1 for & thanks to you, stevygee1987 ;-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic