Flixly Template with PLYR plug-in

AlexaAnne · July 11, 2020, 4:33pm

I am using the PLYR plugin for the Flixly template also… I like the red accent on that template. Is it possible to modify the css of the PLYR plugin?

It is a light blue color and I would like to have it match the red accent of the Flixly template. I am using Vimeo for the video hosting. Is there a solution that could apply to achieve this?

The basic video player allows to change the color which is nice but the user can still click on the the vimeo heart/share/watch later button controls. If we can add a video control color feature for PLYR plugin that would be a HUGE blessing. Is there an easy work around that I can try?

alexander · July 13, 2020, 12:32pm

Hi @AlexaAnne,

Thanks for asking. Unfortunately, it is not possible to change the style of the player, indeed. However, you can use a CSS workaround by placing an HTML element on your page:

and insert the following CSS code:

<style>
.plyr__control--overlaid {
background: #DE1212 !important;
}
.plyr__controls{
color:#DE1212 !important;
}
.plyr--video .plyr__control:hover{
background: #DE1212 !important;
}
input[type=range]{
color:#DE1212 !important;
}
</style>

If you’d need more Bubble alternative solutions, please check here https://forum.bubble.io/.

Best,
Alex

AlexaAnne · July 13, 2020, 10:17pm

Thanks!! it worked like a charm!

alexander · July 14, 2020, 6:54am

Hi @AlexaAnne,

Thanks for feedback, I’m glad it worked. If you like our plugin so far, could you please rate it by going to Plugins tab in Bubble editor. You can find the plugin by name and give it as many stars as it deserves. The more feedback we get, the more motivated we are to build great plugins!

Thanks