Current speed setting highlighted

[KieranM55]

First of all, it's a brilliant plugin thank you so much! I use it for my Guitar Practice Website to slow down exercises for students to play along with which is very powerful.

A bit of feedback I'm getting is that it would be handy for the currently selected speed to be highlighted on the player (maybe a coloured circle or bold writing?) - I had a look through your plugin description, and sorry my coding/Wordpress experience is very basic so I wasn't able to figure out if you already had documented how to do this, is it possible with the current plugin?

I've been able to edit the speed options to suit, using 60/70/80/90/100% as the buttons and they work really well, and the highlighted button would be the icing on the cake if possible, thank you!

[Lewiscowles1986]

Thanks Kieran. I actually have a sister plugin for just that, but you can even use the theme editor custom CSS (if your theme supports) or gutenberg custom-html block to add some CSS.

The code for the sister plugin

<?php
/**
 * Plugin Name: Media Playback Speed Highlight
 * Description: Highlights playback-rate buttons red when selected.
 * Author: Lewis Cowles
 * Version: 1.0.0
 */

add_action( 'wp_enqueue_scripts', function(){
  wp_enqueue_script( 'jquery' );
});
add_action( 'wp_footer', function() {
  $default_css = [["name"=>"color","value"=>"red","important"=>true]];
  $css = apply_filters('media-playback-speed-highlight-css', $default_css);
?>
<style>
.playback-rate-button.mejs-active {
<?php foreach($css as $rule): ?>
  <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?>
<?php endforeach; ?>
}
</style>

<?php

The selector to change text colour to red is basically

.playback-rate-button.mejs-active {
    color: red !important;
}

You can use any CSS that works for your audience though.

If you do put it in a custom HTML block, put the CSS between <style> tags.

The point of the sister plugin is to allow further filters to contextually (by category, tag, or post, using the media-playback-speed-highlight-css filter, and editing an array) to specify separate colours. If you want a single colour, the CSS added to your theme or post is easiest to think about.

Hope this helps, and thank you for letting me know about your use case for the plugin.

[KieranM55]

Hi Lewis, Thanks so much for getting back to me quickly, that's awesome you already have the code/plugin ready for it. Thanks so much for the code, when I have some time this week I'm looking forward to adding it to my website, and I'll definitely let you know how I go, thanks!

…

On Mon, 28 Sep 2020 at 06:54, Lewis Cowles ***@***.***> wrote: Thanks Kieran. I actually have a sister plugin for just that, but you can even use the theme editor custom CSS (if your theme supports) or gutenberg custom-html block to add some CSS. The code for the sister plugin <?php/** * Plugin Name: Media Playback Speed Highlight * Description: Highlights playback-rate buttons red when selected. * Author: Lewis Cowles * Version: 1.0.0 */ add_action( 'wp_enqueue_scripts', function(){ wp_enqueue_script( 'jquery' ); }); add_action( 'wp_footer', function() { $default_css = [["name"=>"color","value"=>"red","important"=>true]]; $css = apply_filters('media-playback-speed-highlight-css', $default_css);?><style> .playback-rate-button.mejs-active {<?php foreach($css as $rule): ?> <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?><?php endforeach; ?> }</style> <?php The selector is basically .playback-rate-button.mejs-active { color: red !important; } The point of the sister plugin is to allow further filters to contextually (by category, tag, or post, using the media-playback-speed-highlight-css filter, and editing an array) to specify separate colours. If you want a single colour, the CSS added to your theme is easiest to think about. Hope this helps, and thank you for letting me know about your use case for the plugin. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AREWBD6JZR7O4RVPECRLXJTSH6Q7PANCNFSM4R2WDXKQ> .

[KieranM55]

Hi Lewis, I've been on my wordpress site trying to add your code. Sorry but I'm a very basic user, I was able to edit your Media Playback speed options, but that's about as advanced as I can do. When I tried adding your code above into my theme's 'Additional CSS' section, I received the error 'Markup is not allowed in CSS'. I've looked into using the Gutenberg Custom HTML blocks, but not sure where to add your code, if it's on an individual page level, or somehow across the whole site. I'm using 'Ample' Theme and using Page Builder by SiteOrigin which uses their blocks, I'm wondering if you might be able to point me in the right direction of how to add this code into my site at all? Sorry for this and for wasting your time! Any help is greatly appreciated. Thanks, Kieran On Mon, 28 Sep 2020 at 18:00, Essendon Guitar <essendonguitar@gmail.com> wrote:

…

Hi Lewis, Thanks so much for getting back to me quickly, that's awesome you already have the code/plugin ready for it. Thanks so much for the code, when I have some time this week I'm looking forward to adding it to my website, and I'll definitely let you know how I go, thanks! <#m_-8396030427860070230_DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> On Mon, 28 Sep 2020 at 06:54, Lewis Cowles ***@***.***> wrote: > Thanks Kieran. I actually have a sister plugin for just that, but you can > even use the theme editor custom CSS (if your theme supports) or gutenberg > custom-html block to add some CSS. > The code for the sister plugin > > <?php/** * Plugin Name: Media Playback Speed Highlight * Description: Highlights playback-rate buttons red when selected. * Author: Lewis Cowles * Version: 1.0.0 */ > add_action( 'wp_enqueue_scripts', function(){ > wp_enqueue_script( 'jquery' ); > }); > add_action( 'wp_footer', function() { > $default_css = [["name"=>"color","value"=>"red","important"=>true]]; > $css = apply_filters('media-playback-speed-highlight-css', $default_css);?><style> > .playback-rate-button.mejs-active {<?php foreach($css as $rule): ?> > <?php echo $rule['name']; ?>: <?php echo $rule['value']; ?> <?php echo (($rule['important'] == true) ? '!important' : ''); ?><?php endforeach; ?> > }</style> > <?php > > The selector is basically > > .playback-rate-button.mejs-active { > color: red !important; > } > > The point of the sister plugin is to allow further filters to > contextually (by category, tag, or post, using the > media-playback-speed-highlight-css filter, and editing an array) to > specify separate colours. If you want a single colour, the CSS added to > your theme is easiest to think about. > > Hope this helps, and thank you for letting me know about your use case > for the plugin. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#6 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AREWBD6JZR7O4RVPECRLXJTSH6Q7PANCNFSM4R2WDXKQ> > . >

[Lewiscowles1986]

Hi Kieran,

The following is the only thing you would paste into custom CSS

.playback-rate-button.mejs-active {
    color: red !important;
}

I take it you tried pasting the plugin code into the CSS box?

Can you share a screenshot (and use GitHub instead of email)?