Every now and then a user asks a question about how to customize the appearance of the FV Player on his/her website. Modifying the color scheme and the font can be done very easily in the Skin settings (here's a guide on how to do that - Customizing FV Player Skin), but there is a lot of other things you can set up outside the Settings screen just by applying some basic CSS knowledge.
Remember to always add these CSS tweaks to your theme's stylesheet. If they were added to FV Player's stylesheet, they would be overridden by every update.
This article lists just a few of the infinite amount of things you can do with CSS. These tips were requested by our users and are now available in one list, so everyone can benefit from them:
- Moving the Interactive Transcript to Different Position
- Making a Frame Around the Video
- Fixing Right-to-Left Player Controls
- Editing the Text in Video Ads
- Making the Control Bar Transparent
- Editing the Subtitles With CSS
- Removing the Black Background at the Beginning of a Video
- Adding a Shadow Under the Video Box
- Changing the Color of the Buttons and Time
- Transparent Video Lightbox Area
- Editing the Play Icon
- Customizing the Close Button in Overlay Ads
Moving the Interactive Transcript to Different Position
Interactive Transcript is one of the great features you will get with the Pro version of FV Player. It will use a VTT file to show a dynamic text transcript in a box below the video. The text will follow the video playback and highlight the current line. It will also allow viewers to skip to any point in the video by clicking on other lines in the transcript.
If your theme is wide enough (think no sidebars and 1200px width), it is possible to move the transcripts to the side of the video box. You will have to do these 3 steps:
1. Wrap the video shortcode with a DIV that uses a clearing class. Typically, all themes include a class called .clear or .clearfix. These are used whenever you want to wrap columns or floated elements so they don't just hang around wherever they (or the browser) want.
Example:
<div class="clearfix">[fvplayer src="https://vimeo.com/150185992" transcript="auto" splash="https://i.vimeocdn.com/video/549595739_1280.jpg" caption="Teaser: Paillard Bolex (English subtitles)" ]</div>
2. Move the transcript to the side - now that we have it all wrapped, we can start moving, the video to the left and transcript to the right. You get best results if the width of your videos is set to 640px.
.flowplayer { float: left; width: 55%; }
.fv_fp_transcript_wrapper { float: right; width: 44%; }
p.fp-caption { display: block; float: none; max-width: 100%; }
After this addition to your theme's stylesheet, it should look like this:
Video and transcript side by side
3. Bring it back for mobiles - transcript on the side will really work best only on desktops and large screens. For smaller devices we need to add some media queries, to bring them back under the video. You can either just copy this part of the code somewhere near the end of your stylesheet or incorporate it into your existing media queries, if you know HTML well enough.
@media only screen and (max-width: 64em) {
.flowplayer, .fv_fp_transcript_wrapper { float: none; width: 100%; }
}
Making a Frame Around the Video
Here's a quick guide on creating a custom frame from an image and have the FV Player placed inside it.
You will need an image that will serve as the frame in the background, preferably in .png format. To make the player fit, you have to set the size of the video in accordance with the background image. To set the size and other features of the image, you will need to wrap the video in a <div> tag with custom id. The id will be styled in CSS and will contain the background image itself, size, and padding. The padding needs to be set individually for every theme, so you'll have to give it a couple of tries to make it fit perfectly.
The size of the background image is 608x395 px and the video is 573x324 px, which is the size of the screen of the TV frame. Here is the selector used in this example:
#frame
{
background: url('https://foliovision.com/images/2016/10/device-tv2.png') no-repeat;
background-size: 608px 395px;
padding: 16px 112px 90px 0px;
}
Note: Please keep in mind that this solution is not responsive and won't work properly on mobile devices.
Fixing Right-to-Left Player Controls
If you are using an RTL (Right-to-Left) language on your website (for instance Arabic, Syriac or Hebrew), it is possible that FV Player's settings get switched horizontally and will look like this:
This might be caused by a declaration like this in your CSS:
body {
direction: rtl;
}
If you want to revert that, simply add the following CSS rule to your theme's stylesheet (or a custom CSS file or field):
.flowplayer {
direction: ltr;
}
Editing the Text in Video Ads
The custom video ads feature available for the FV Player Pro users comes with a text that informs the viewer about the time that remains until the ad could be skipped. The time can be set manually in the player's settings and after the countdown finishes, the Skip button will appear and let the viewers skip the ad.
Text in FV Player Pro's Video Ads
Some of our users were asking about how to modify this text, so here are some possibilities.
Changing the Text Color
If you want to modify the color of the text, you can do so by adding this CSS code to your template's style sheet:
.flowplayer .fv-cva-time {
color: red
}
#content .flowplayer a.fv-cva-skip, .flowplayer a.fv-cva-skip {
color: blue
}
The example above has two parts. The first selector alters the color of the “This ad will end in … seconds” text and the second one alters the color of the “Skip” button. You can of course use different colors than red or blue.
Hiding the Text
You can hide the text entirely, disabling the ability to skip, for the viewers. Just add this CSS code to your template's style sheet, by going to Appearance> Customize> Additional CSS, and pasting it into the code box there. Click “Publish” and now the message no longer displays.
.flowplayer.is-cva .fv-cva-time {
display: none; !important
}
Making the Control Bar Transparent
FV Player control bar has a default dark grey color, but can be easily changed to a different color or can be made completely transparent. To do so, use this selector:
.flowplayer .fp-controls {
background-color: transparent !important;
}
This is how the transparent control bar looks:
Editing the Subtitles With CSS
The subtitles in FV Player can be customized in Settings > FV Player > Skin tab > Subtitles. You can change the font face, size and color of the background along with the background opacity. You can read more about it in this guide - Customizing FV Player Skin.
In case you would like to edit the subtitles beyond the options available in the player's settings, you can use these CSS selectors.
To change subtitle position, width and text alignment, use
.flowplayer .fp-player .fp-subtitle
To change subtitle color, text size and padding, use
.flowplayer .fp-player .fp-subtitle span.fp-subtitle-line
The default values are:
font-size: 18px; color: #fff; background-color: #000; padding: 0 0.4em; border-radius: 4px; line-height: inherited from theme
Note: We have rounded corners on span.fp-subtitle-line. Make sure these corners look OK on all screen sizes if you add custom styling.
Increasing the Subtitles Font Size in Fullscreen
The size of the subtitles in fullscreen mode is already increased to 125% for better readability, yet some users might want to increase it even further. It that case you can use this CSS code to set the size yourself. Just change the font-size value:
.flowplayer.is-fullscreen .fp-subtitle .fp-subtitle-line {
font-size: 250%;
}
You can see the result when you open this demo in fullscreen:
Moving Subtitles Under the Video
If you are for some reason unsatisfied with the default position of the subtitles (in the bottom part of the video), than you can use this code to place them in a new position - under the video box.
The subtitles will be shown in a black box below the video, that will appear only when the text is loaded, so it doesn't disrupt the design of your website. However, they will be shown in their default position when in the full-screen mode. There is one thing to remember - the code below works only if you use default text-size for subtitles, which is 16px. If you change it in your player setting, you also have to adjust the `.flowplayer .fp-subtitle` bottom property to one, that will match the subtitles under your player. The sizing also depends on what is the line-height of your theme, so even if you use the default size, there might be a gap between the video and the subtitles below. Please adjust it as mentioned above with the bottom property.
You can see the adjusted caption size in the example below:
To use the subtitles in this setting with the default 16px subtitle size, apply the following CSS code:
.flowplayer:not(.is-fullscreen) {
margin-bottom: 5.2em !important;
overflow: visible;
}
.flowplayer:not(.is-fullscreen) .fp-subtitle {
bottom: -46px !important;
background-color: #000;
display: block;
}
@media only screen and (max-width: 39.9375em)
.flowplayer:not(.is-fullscreen) .fp-subtitle {
bottom: -40px !important;
}
}
@media only screen and (max-width: 29.9375em) {
.flowplayer:not(.is-fullscreen) .fp-subtitle {
bottom: -36px !important;
}
}
Removing the Black Background at the Beginning of a Video
When the video is loading and hasn't started yet, it's possible to see the default black background for a fraction of a second.
If you’d like to remove it (by making it transparent), you can use this code:
.container .flowplayer {
background-color: transparent !important;
}
Adding a Shadow Under the Video Box
This is a simple effect that will add some depth to your website's design:
To add this effect, use this code:
.flowplayer .fp-player {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-box-shadow: 0px 35px 10px -25px #aaaaaa;
-moz-box-shadow: 0px 35px 10px -25px #aaaaaa;
box-shadow: 0px 35px 10px -25px #aaaaaa;
}
Changing the Color of the Buttons and Time
Most of the elements on FV Player's control bar can be changed in the Skin settings. A couple of things are missing, though, and that is adjusting the color of the play button, pause button, sound icon, and time counter.
You can use this code to change the colors of these icons:
.flowplayer .fp-duration, .flowplayer a.fp-play, .flowplayer a.fp-mute {
color: #27CE73 !important;
}
You can change the value #27CE73 and use any color you want.
Green icons are the ones with the changed color
Transparent Video Lightbox Area
This code will allow you to make the edges of the video transparent, when the video lightbox is active. You can see how it works in the example videos below.
Regular Video Lightbox
Transparent Video Lightbox
To make the edges of the lightbox area transparent, use the following CSS code:
.flowplayer.lightbox-starter .fp-ui {
background: transparent;
}
.flowplayer.lightbox-starter {
background-color: transparent !important;
}
Editing the Play Icon
The default play icon in FV Player can be edited in two ways. You can replace the background image and therefore use a custom play icon and you can also change the size of it.
To change both of the attributes of the play icon, you can use this code:
.is-splash.flowplayer .fp-ui, .is-paused.flowplayer .fp-ui {
background: url(https://foliovision.com/images/2017/11/Play-Music-icon.png) center no-repeat;
background-size: 19%;
}
Replace the URL path with the one you want and don't forget to use the center and no-repeat elements. To change the size, just alter the background-size property.
Customizing the Close Button in Overlay Ads
The free version of FV Player allows users to set the overlay ads - the classic banner pop-ups that appear during the video playback. These can be created from scratch, showing just a link or a custom call-to-action button, or you can use ad code from services such as Google AdSense. You can read more about the overlay ads in the guide Overlay Ads in FV Player.
Some of our users have expressed the need for customizing the closing button, that appears in the top-right corner of all overlay ads. That can be easily done via CSS and there are a couple of properties, that can be changed. This is the selector used for editing the close ad button:
.fv_fp_close a {
width: 22px;
height: 22px;
background: url(//my-close-ad-button.png) no-repeat;
background-size: 22px 22px;
}
The width and height properties define the size of the clickable field and the background-size defines the size of the "x" icon itself - therefore they should be the same size.
If you want to replace the icon with your own, you can use the background: url property (don't forget to also add the no-repeat; property). With custom dimensions and background image, the close button can look for instance like this:
