WordPress.org

Forums

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

  1. stevygee1987
    Member
    Posted 2 years 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 2 years ago #

    Video embeds look fine on the iPhone btw.

  3. Frank Goossens
    Member
    Plugin Author

    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    works perfectly, thanks!

  8. Frank Goossens
    Member
    Plugin Author

    Posted 2 years 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 2 years 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

  • WP YouTube Lyte
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic