Hello Alan,

I’ve briefly checked your site and it appears that z-index values are wrongly applied within the theme.

Main content and the container with the sticky video share the same class .prk_section which has z-index: 1;. The container holding the sticky video should have a higher z-index.

You could try the other way, removing that z-index on the .prk_section element. When I’ve tried that, the video appeared above content. You’d have to check, if it didn’t affect anything else on the site.

thanks
Viktor

Hello Kim,

thanks for noticing, it’s a bug and we’ve just fixed it in our player, but also submitted it as a bug fix directly to flowplayer.org.

The fix will be in our next release which will come out today.

thanks
Viktor

Additionally, here is our Doc file, which describes all what I’ve wrote above
https://foliovision.com/player/basic-setup/alignment-settings

thanks
Viktor

Hello Blayne,

we’ve adjusted the speed menu, so it has more space to breathe on smaller screens. The change will come in one of the upcoming releases.

thanks
Viktor

Hello Cesar,

we’ve readjusted the subtitle sizing in fullscreen mode for a number of screen sizes (not all of them), the changes are already released in 7.1.11.726.BETA

thanks
Viktor

Hello Ferdinand,

thanks for the list. I see several plugins, which have special styling for forms (Ninja Forms, Woocommerce), but also a Pro plugins, to which we don’t have access to.

I’d definitely set up the test environment and see how it behaves with TwentySeventeen theme, or look up the form labels in any Developer Tool in a browser of your choice. The chance is great, that one of the plugins or the theme is adding the color white to form labels or even worse, impose an !important rule on such declaration.

If you’d like us to troubleshoot your theme with our player, we’re happy to do that as a Pro Support Incident.

thanks
Viktor

Hello Johnny,

you cannot edit what’s in wp-content/fv-flowplayer-custom as this CSS is generated from the player. You correctly mentioned, that it is generated each time you save your player settings.

So that means, you’d have to put your changes to a different location and target your elements better even without using the !important rule.

thanks
Viktor

Hello Radmitry,

our player already hides the controlbar in fullscreen after a while if you don’t move your cursor. Once you move it, it appears again. Hiding of the controlbar occurs only when the video is playing, just like YouTube and other players.

If you want to hide it also when the video is paused, this could be done via CSS using these classes:

.is-paused
.is-fullscreen
.is-mouseout
.is-mouseover

Thanks
Viktor

Hello Rolf,

as I can see, those are properties, which target older browsers and they all have correct vendor prefixes. On the other hand, vendor prefixes are treated as non-standard and therefore technically invalid CSS.

The are tolerated and widely used, so even the validator itself now includes an option for Vendor Extensions (under More Options box). There you can switch errors into warnings, so the site validates tentatively.

We will keep these vendor prefixes so our plugin is backwards compatible.

thanks
Viktor

Hello Gerald,

can you give us a working example, where the problem is visible?

thanks
Viktor

Hello Pesi,

I’ve checked these two links
http://tlabcvideos.org/wp/archived-videos/2012-09-21/
http://tlabcvideos.org/wp/archived-videos/hd-samples/

and found, that player settings 720×480 don’t match a wide site like this (1200px). The easiest solution is to use a bigger player size 1280×720 with no alignment setting. This way all the place gets filled out nicely and without gaps.
(Your HD sample has currently align:right setting, you need to remove that).

Thanks,
Viktor

Hello Steve,

use !important on both of these and move the code into your theme stylesheet. This way you don’t need to worry about future plugin updates. And to save some space, we can make the code even shorter:

.flowplayer.lightbox-starter .fp-ui {
    background: transparent;
}
.flowplayer.lightbox-starter {
    background-color: transparent !important;
}

thanks
vk

Hello Julio,

you might want to try this short CSS code to put the captions below the video. Although, in fullscreen mode they will be in their default location – inside the video.

/* Captions under the player */
.flowplayer {
margin-bottom: 80px !important;
}
.flowplayer.is-fullscreen {
margin-bottom: 28px !important;
}
.flowplayer .fp-subtitle {
bottom: -58px !important;
background-color: #000;
display: block;
}
.flowplayer.is-fullscreen .fp-subtitle {
bottom: -28px !important;
background-color: transparent;
}

thanks
vk

• This reply was modified 8 years, 7 months ago by viktor.

Hello Sam,

the topmost parent container for the AB loop part is .fv-ab-loop and .active is added if it’s turned on. The AB progress bar shares the same width, height and color with the timeline progress bar and it’s class is .noUi-background.

If you’d like to remove the two letters, just use this code

.noUi-handle.noUi-handle-lower::after,
.noUi-handle.noUi-handle-upper::after {
display: none;
}

thanks
vk

Hello Victor,

I’ve checked our FV Player Pro against http://www.jwplayer.com/products/jwplayer/ and http://videojs.com/.

On desktop with Firefox and Chrome (both latest ones):
– all players had more or less the same transition
– on Chrome JW Player was blinking and jumping all mad
– in general Video JS was ok

On mobile (latest Sony Xperia M4 with Android Lollipop 5.0):
– JW Player was jumping when going from one state to another
– same for FV Player
– Video JS was the smoothest of all

Plus, on mobile if you were in fullscreen and wanted to go back, one tap paused the video on FV Player, but not JW and Video JS.

Only thing I found is that the transition itself is not much different on our FV Player, it’s just maybe a bit faster than on the other too.

I’ve also tested you your site (example http://firstclasstracks.com/video/dounia-im-not-the-only-one-sam-smith-cover/) on FF and Chrome. Firefox was good, but Chrome was jumping badly. On CSS level, I’ve noticed, that the actual video is placed in a div.player container, that has various properties in bootstrap.min.css. It’s height is set to zero, there is position relative and some others too. It might be, that this is causing some of the trouble you’ve seen. You might want to check these out and see if the fullscreen transition improved.

thanks
vk

Hi Tim,

I’d suggest you place this code just at the end your your stylesheet file


#fv_player_pro_boxMiddleLeft, #fv_player_pro_boxMiddleRight, #fv_player_pro_boxTopLeft, #fv_player_pro_boxTopRight, #fv_player_pro_boxBottomLeft, #fv_player_pro_boxBottomRight { width: 0 !important; }
#fv_player_pro_boxTopCenter, #fv_player_pro_boxTopLeft, #fv_player_pro_boxTopRight { height: 0 !important; }
#fv_player_pro_boxBottomLeft, #fv_player_pro_boxBottomRight, #fv_player_pro_boxBottomCenter { height: 0 !important; }
#fv_player_pro_boxContent { background: transparent !important; }
.flowplayer.lightbox-starter .fp-ui { background: transparent !important; }
.flowplayer.lightbox-starter { background-color: transparent !important; }
#fv_player_pro_colorbox, #fv_player_pro_boxOverlay, #fv_player_pro_boxWrapper, #fv_player_pro_boxContent {overflow: hidden !important; }


Sorry for the inconvenience, but we had to change the lightbox naming classes to exclude future problems. I’ve tested the above code on your test page and it removed the border together with the close button.

Please let me know, once you update your stylesheet and cleared the cache so I can check back.

thanks
vk

Hi Tim,

although I can reproduce a white frame around a videos, it would really help to make my answer more accurate if you’d provide a URL.

It’s not a regular border, that could be just switched off, but with help of this code you can hide the white box and leave just the video visible.


#cboxMiddleLeft, #cboxMiddleRight, #cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight { width: 0; }
#cboxTopCenter, #cboxTopLeft, #cboxTopRight { height: 0; }
#cboxBottomLeft, #cboxBottomRight, #cboxBottomCenter { height: 0; }
#cboxContent { background: transparent none repeat scroll 0 0; }
.flowplayer.lightbox-starter .fp-ui { background: transparent none repeat scroll 0 0; }
.flowplayer.lightbox-starter { background-color: transparent !important; }
#colorbox, #cboxOverlay, #cboxWrapper {overlay: hidden;}


If the code doesn’t work, you might have to add !important declatarions to all of the above instances.

thanks