WP YouTube Lyte: new player UI and API tips

WP YouTube Lyte 1.6.4 was released a couple of hours ago and features the new YouTube player look and feel:

Vieux Farka Touré & Julia Easterlin – Little Things (Music Video)

Watch this video on YouTube.

Here are some tips on how you can tweak that to match your own preferences;

As you can see in the vid above (Vieux Farka Touré & Julia Easterlin – Little Things), I wanted WP YouTube Lyte to show the bottom control (which as on YouTube is now invisible by default) add can be accomplished with just a little CSS:

.ctrl{display:block !important;}</code>

If you’d like Lyte to use the exact same font as YouTube does, you can add CSS to import that font and it will be applied to title-field in Lyte:

@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);

You can even use Lyte’s API do alter the CSS like this;

add_filter('lyte_css','lyte_change_css',10,1);
function lyte_change_css($lyte_css) {
        // source the font
        $lyte_css="@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);".$lyte_css;
        // show bottom control
        $lyte_css.=" .ctrl{display:block !important;}";
        return $lyte_css;
}

Talking about the API, you can now also force Lyte to be active on mobile as well (which is not the default as it would force your visitors to click “play” twice, once to load the YouTube iFrame and once to play as mobile YouTube doesn’t support autoplay), you can use this code;

add_filter('lyte_do_mobile','lyte_on_mobile',10,0);
function lyte_on_mobile(){
        return true;
}

Leave a Reply

Your email address will not be published. Required fields are marked *