Change Fullscreen Button Position

Hi Nick & Martin,
I’m new to Flowplayer (finally migrating from jwplayer who have left WordPress self-hosted users behind since JW6 and after).

It would be great if having the fullscreen button on the bottom right was added to the Trello board for future integration as an option. In the meantime this is what works for me and I hope it helps…

I first removed the volume and mute buttons (as I didn’t want them) by placing this in my theme’s functions file at Dashboard > Appearance > Editor > functions.php

‘tweak_controlbar_fv_flowplayer_attributes’, 10, 2 );
function tweak_controlbar_fv_flowplayer_attributes( $attrs ) {
$attrs[‘class’] .= ‘ no-volume’;
$attrs[‘class’] .= ‘ no-mute’;
return $attrs;
}

Then add this to your website’s css file at Dashboard > Appearance > Editor > styles.css (or whatever your stylesheet is called). As you can see below, I wanted my fullscreen background button colour green to match my player skin but just change it to whatever you want…

/*Flowplayer Customisations*/
/*width of timeline to leave room for fullscreen button*/
.no-brand.flowplayer .fp-timeline {
margin-right: 97px!important;
}
.no-brand.flowplayer .fp-remaining, .no-brand.flowplayer .fp-duration {
right: 50px!important;
}
/*move fullscreen button to bottom right and change its background colour to green*/
.flowplayer .fp-fullscreen, .flowplayer .fp-unload, .flowplayer .fp-close
{
background-position: 0px -197px!important;
width: 38px!important;
bottom:-23px!important;
z-index: 9999!important;
top: auto!important;
right: 8px!important;
}
.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-close,.flowplayer .fp-embed{right:0;bottom:0!important;}
.fp-controls,.flowplayer .fp-title,.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-close,.flowplayer .fp-embed,.flowplayer.aside-time .fp-time{background-color:#637746 !important;background-color:rgba(100,120,70,0.65);}

Hi Pádraig,

Thanks for the detailed notes. We are in the middle of adding a lot more customisation options for the player interface. First stop is a YouTube style interface (without the annoying ads of course!) for people who have visitors used to that interface.

Your notes are a good start to further improvements. You may be interested in a long article I published today with ideas on how to improve the WordPress Editor and the WordPress editing experience.

Much appreciated.

Alec

Hi Fv Player team!

I just want to say that there is really ONE only thing that I am disappointed with on FV player, I know it might sound ridiculous, but it’s the fullscreen icon that is on top -without an option to display it on the bottom right corner.

As an ergonomic-idiot-proof-focused designer, I believe most of my users (aged from 9 to 86!) are really used to fullscreen button at the bottom right -as it is on the most widely used players (youtube, iOS and android players etc.) and as it has been for a long time now.
From observation and feedback on multiple projects along the years, most of our users are missing it when it is on top. They just don’t see it, or won’t even think it does that if they see it (idiot proof I said :). And if they figure it out, same pain goes to exit fullscreen. They won’t look on top and get frustrated.

I am definitely for change, and really love the improvements and new trends you guys are rolling out with your amazing player, yet on this specific topic I really believe it is a must have for ergonomics having an option to put fullscreen button where people are used to find it.

We (believe) we have beautiful content, and really want people to experience it in fullscreen. Too bad if most users are missing the button :-p

Thank you for considering!! Love FV player!

Evélina

Hello Evélina,

next release of FV Player will come with a “Controlbar Fullscreen” setting for the custom skin which will move it to the control bar. It will also be also set that way in the Youtuby skin preset.

Thanks,
Martin