Foliovision › Forums › FV Player › How to … › Control the size of the player in WordPress 2020 theme
-
I’m running the latest version (beta) FV Player Pro on Twenty Twenty (WP 5.4.2) and at the moment I’m having to control the page size to stop the player from being fullscreen all the time.
It’s set to 1280×720 both on the global settings and on each player.
Can you please tell me how I can limit the player size (preferably with CSS) a pointer to the relevant selector (and settings) would be ideal.
Thanks in anticipation. (Great player, by the way)!
-
-
Hello Gillian,
I was not able to reproduce the issue. Did you modify the Twenty Twenty theme in any way? Is it a standard post or some page with special template?
That size of 1280×720 is applied to the .flowplayer element as max-width and max-height, unless it’s a playlist. In that case it get’s width: 100% which still won’t extend past your content column boundaries.
Please send over your system info found in Settings -> FV Player Pro -> Tools -> System Info.
Please also send a link where we can see the issue.
Thanks,
MartinThanks for your reply Martin. Yes the theme is modified. The player worked fine in Twenty Seventeen, but since changing to Twenty Twenty, I can’t control the size of the player.
I don’t want to waste your time, so I’m going to do some tests to see whether I can isolate the cause of the issue myself.Thanks again, Martin.
I should have mentioned in my first post, that although the thumbnail image was blurry and pixilated, the video itself played fine (thank goodness).
I discovered that if I opened the the image directly in a browser, it displayed at the full size (of course) and even though it was larger than the player thumbnail (on screen) it looked sharp and normal.
Then I discovered that if I put it in a Block within 2020 (either as a URL or from the Media Library – it looked just as awful as the player thumbnail (and the same size).
So that ruled out FV Player as a possible cause.
I then downloaded the 1280×720 images (all from the same file) that I’d placed on a page within 2020 – and they had somehow been reduced in size to around 600 px. (Max size in my Media settings is 1280×720).
I was unable to find out what was causing this (and the uncontrollable FV Player size) so I reverted back to Twenty Seventeen.
All is not working well again, but I feel it’s a backward step because I want to keep up with current themes if possible.
_______________________
As I said earlier, I love the FV Player – but I do wish there was a button to go back to the beginning. Having the player start off where it left off last time is great, but sometimes you need to start again.Hello Andy,
Twenty Twenty sets global $content_width; to 580. That might be it: https://github.com/WordPress/twentytwenty/blob/master/functions.php#L47-L51
Can you send us any example of an existing player where that “start again” kind of feature works really well?
Thanks,
MartinThank you again, Martin. I’m sure the global content width is the cause of the the problem, but I’m baffled by it. You see huge great images on Twenty Twenty – I can’t believe everyone doctors their functions.php file to achieve them.
Either way, we’ve switched back to Twenty Seventeen now and I’m still licking my wounds from the experience (several days of work more or less wasted).
As for the “Start again” button, I don’t know of one, so I guess it’s not easy to achieve (hadn’t realised that when I suggested it).
Thanks again for your help – now I’m trying to work out how to move over to HLS for automatic quality switching.
A bit “out of my depth”, really (I think I have the video side covered).
Might it be the sort of thing Pro Support could help with??Hello Andy,
Start again – it’s not hard to achieve, but two play arrows would be too confusing. Perhaps something like the Rewind button could work if it would appear next to the big play button with word “Restart” in it.
Regarding your encoding needs – we are finishing FV Player Coconut which integrates the Coconut encoding service with FV Player and WordPress. It lets you store your videos in AWS, DigitalOcean, or SFTP. You will also need a CDN and BunnyCDN works well with all of these video storage options.
Thanks,
MartinThanks again, Martin. FV Player Coconut sounds interesting but uploading the files for conversion is a big problem just now.
Our internet is very slow. Upload is averaging 0.78Mbps.
It’s frustrating because our provider brought the “Superfast” fibre cable to within 30 metres of our door three months ago, but there’s no sign of them connecting it up yet!
This means it’s not really practical to upload the huge files needed for conversion to HLS online. All we can get from the provider is that we’ll be connected “before the end of the year”.
I thought the HLS conversion could be done with Compressor, but try as I may, I just can’t get sharp results. I’ve used compressor for years, but I’m completely baffled by this. The images are dreadful compared to the mp4 files we get from Handbrake.
I’ve tried using the default Compressor settings, and I’ve tried customising them myself (which is better) but they’re unusable.
At the moment, automatic quality switching is a non-runner…Hello again, Martin.
This is just to say that I have finally attained a reasonable result using Compressor to encode HLS. It’s a great relief to us here because we believe that automatic quality switching will be a big step forward. A surprising number of our members are unaware of the player controls, so the less they need to adjust, the better!
Thanks once again for all your help – and once we have a reasonable internet connection, we will definitely look at FV Player with Coconut.
Best wishes, AndyHello Andy,
FV Player Coconut can be obtained here: https://foliovision.com/downloads/fv-player-coconut
It’s a free addon, so you can just log into your exiting foliovision.com account and get it. Note that you have to use the FV Player Pro plugin together with it to be able to get the video encryption features.
In case of any issues please check the documentation here:
1) Setup guide: How to Setup Encrypted HLS with Coconut https://foliovision.com/player/securing-your-video/setup-encrypted-coconut
2) End-user guide: How to encrypt videos directly in WordPress with Coconut https://foliovision.com/player/securing-your-video/encrypt-videos-directly-wordpress
Please let us know if you run into any issue when following our documentation.
Thanks,
Martin