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 11 months 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 11 months ago #

    Video embeds look fine on the iPhone btw.

  3. futtta
    Member
    Plugin Author

    Posted 11 months 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. futtta
    Member
    Plugin Author

    Posted 10 months 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 10 months 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. futtta
    Member
    Plugin Author

    Posted 10 months 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 10 months ago #

    works perfectly, thanks!

  8. futtta
    Member
    Plugin Author

    Posted 10 months ago #

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

  9. futtta
    Member
    Plugin Author

    Posted 10 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic