Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc(FEC-12712) - add CSS examples #714

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

doc(FEC-12712) - add CSS examples #714

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf3a809
doc(FEC-12712) - add CSS examples
giladna Dec 21, 2022
e0a5bc2
cont
giladna Dec 21, 2022
e76c297
typo
giladna Dec 21, 2022
32d4092
typo
giladna Dec 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions docs/css-classes-override.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,43 @@ And here are some of the classes you can override:
>
> - The namespace for the default skin must be `playkit`.
> - The Player uses the same font family in **all** of its components. You can override it in the general parent class (`.playkit-player-gui`) or customize each component according to your preferences.
> - UI Componets may override your css modifications


### Example - Customize UI Classes

##### Modify using style TAG
```
<style>
#player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-fullscreen {
background-color: #4CAF50;
}

#player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-settings {
display: none;
}
</style>
```


#### Configuring UI Elements form external css file

* The css configuration can be also applied via css file that is hosted on your domain

```
"ui": {
"css": "https://path/my.css",
},
```


* Modifing the elements can be done programmatically in some more ways like querySelctor, gerElemetById and more

#### Example
```
document.querySelector("#player-gui > div.playkit-gui-area > div.playkit-bottom-bar > div.playkit-right-controls > div.playkit-control-button-container.playkit-control-fullscreen > div > button").style.display = "none"

```

## Player Classes List

Expand Down