How to style your embeddings
Tips, classes and info needed to style your recorder and your player
How to style your embeddings
Ziggeo video recorder, audio recorder or equally video player are all bits of code that you can add to your website that we refer to as embeddings.
Embedding can as such be recorder and player and there are different ones for different media.
The great thing about them, even though there are few types, is that they come with pre-defined themes. Another, even better thing is that you can modify the embeddings to match your design.
This guide will help you see how as well as to show you few places you should check out to make this simple to do.
If you want to click around some options instead, consider checking out our sandbox here: Configuration sandbox.
Styling Video Recorder
Video recorder has several themes you should check out. They can be found here.
As you see the theme that best matches what you are after grab it's name and use it as a starting point. It will help you speed things up having the UI look close to what you are after.
Now each recorder theme comes also with few colors you can pick from. There is red, green and blue.
At this time you can decide if you would use:
defaultmodern,cube,space,minimalist,elevate,theatre
The actual code is quite simple to add. All you would do is set it up like so:
<ziggeorecorder
ziggeo-theme="elevate"
ziggeo-themecolor="blue">
</ziggeorecorder>
- The default theme is used when you do not specify any theme. If you want to change your video recorder code we do suggest setting a theme first. This means not to use the default one.
Changing Elements of Your Recorder
Our system is using classes for different elements allowing you to change things to better match your design. We will list some of these classes here, allowing you to change them.
Initial Screen buttons
The CSS class you would look for is: .ba-videorecorder-chooser-button-0
The number at the end would change depending on your setup. The numbers start from 0 and go up depending on how many buttons you have. For example by default you have the record and upload buttons shown. This means that you will have the class ending with 0 and another element under it with same class ending with 1.
There are of course ways to style them all together, regardless of how many buttons are shown with something like so:
div[class^="ba-videorecorder-chooser-button-"] {
width: 100%;
}
This would change all of these buttons to be 100% wide.
Progress Indicator
As you go from this screen you can come to see the progress indicator. This too can be changed in any way you want.
The CSS classes in this case would be ba-recorder-loader-container and ba-recorder-loader-loader
Generally you might want to hide the original, however you might change it directly. Just adding some CSS might result in your progress bar looking completely different. Try this as example:
.ba-recorder-loader-loader {
border-top: none;
border-color: white;
border-block-style: dotted;
}
Please do keep in mind that your CSS might look different in different browsers depending on the exact rules you use. Because of that we do suggest checking the same on different browsers.
Messages
Part of the experience is to see some sort of message on your screen. It might be that your camera could not be found, or to tell you how much some video was uploaded. In either case, you might want to change the styles for that.
In that case you would be looking at .ba-videorecorder-message-container and .ba-videorecorder-message-message. Changing the text into red italic of font family that is used on your website is as simple as in following example:
.ba-videorecorder-message-message {
color: red;
font-family: QuickSand;
font-variant: all-small-caps;
font-size: 16px;
font-style: italic;
}
Controls
During recording there are some buttons which are there to help you out. They can help you quickly switch the mic or camera, or offer some other setting.
These are the classes for the same:
.ba-commoncss-icon-cog.ba-commoncss-icon-videocam.ba-commoncss-icon-mic.ba-commoncss-icon-state-bad.ba-commoncss-icon-state-good
The first 3 are for specific point of your recorder, while the last 2 are common states devices can be found in. The state-bad ones would generally be with some red-ish color while the state-good would be with some green-ish color. Combining the videocam icon and the state allows you to specify the style for each state it can be found in.
Another part of our recorder is the Record button. You can style it using the .ba-videorecorder-button-primary. Behind this class you will also see other buttons such as "Redo", "Skip", "Pause" and "Resume" recording. The exact label used might be different based on your selected language.
Changing Elements of Your Player
Much like recorder your player can be fine tuned and optimized to look like any other area of your web app, website or service.
Just like recorder, the player supports the same themes. This makes it easy for you to find and use single theme and have similar experience for both recorder and player usage.
You can see all of the themes on the player here.
The actual code is quite simple to add. All you would do is set it up like so:
<ziggeoplayer
ziggeo-theme="elevate"
ziggeo-themecolor="blue">
</ziggeoplayer>
- The default theme is used when you do not specify any theme. If you want to change your video player code we do suggest setting a theme first. This means not to use the default one.
Initial Screen
All video players have one thing in common. That is that generally first thing you will see is the image and the play button over it. To change the style of that button you would use .ba-player-playbutton-container and .ba-videoplayer-playbutton-button.
Depending on the theme, there are different CSS rules already present so edits would be done differently.
For example:
.ba-player-playbutton-container {
border-radius: 50%;
border: 10px solid white;
}
.ba-player-playbutton-button {
font-size: 20px;
line-height: 22px;
position: relative;
top: -80px;
left: -10px;
}
- Please note that the ba-player-playbutton-button has pseudo CSS rules (::after) which are actually setting the triangle and it's size. The above is based on the standard CSS without any other rules changing things, so it might end up looking different on your website. Play around with rules to get things exactly as you want them.
Progress Indicator
Progress on player can be used for different things. It can show you the length of the video, current position as well as how much was cached. It also allows you to quickly seek (go to) some position in the video.
As such it has several points however it's classes are always with the theme name as well.
You can easily change the codes to use that specific theme, or you can apply some CSS rules that work regardless of the theme.
Here are the classes (we use Modern theme here):
.ba-player-theme-modern-progressbar- The general progress element holding all of its parts.ba-player-theme-modern-progressbar-inner- The "tube" showing the progress.ba-player-theme-modern-progressbar-cache- The part showing how much video was downloaded from our servers.ba-player-theme-modern-progressbar-position- The current position within the video
An example of the CSS regardless of the theme would be as follows:
[class*="-progressbar-inner"] {
background-color: orange;
}
[class*="-progressbar-cache"] {
background-color: blue;
}
[class*="-progressbar-position"] {
background-color: lime;
}
Next to the progress bar your progress can be seen through time presented on the player. Depending on the theme, this can be shown in different ways. There might be just one part, all parts or none of the time shown.
Since we already used the Modern theme for example, we will continue with the same in our example.
.ba-player-theme-modern-time-container.ba-player-theme-modern-time-value.ba-player-theme-modern-time-position
In some themes you might find that time separator can be styled as well as the time duration. These follow the same approach as above, with the class end being -time-sep and -time-total-duration. Generally however all times are styled with -time-value instead.
Controls
.ba-commoncss-icon-play- The play control.ba-commoncss-icon-volume-up- The volume indicator when volume is 50% or higher.ba-commoncss-icon-volume-down- The volume indicator when volume is bellow 50%.ba-commoncss-icon-volume-off- The volume indicator when sound is muted.ba-commoncss-icon-cog- The settings cog
Tips and tricks
In this section you will find some good to follow tips. These are not rules, however they might just help you save time with your setup.
When styling the player or recorder it is best to set the settings the way you like them, including the theme. The last point should be changing the styles. The reason for this is simple. Some of the parameters that you might use, might change what is shown or completely change how things look. By doing this at the end of setup you make sure that your styles are right on the spot.
Add your own CSS rules after the other rules you load - such as our ziggeo.css file. That way your rules are more important. Otherwise the ones that are loaded last will be used by browser.
The most important tip - please reach out to us if you have any questions. Our support team can help you guide you in the right direction.