You can change the class hooks in the options to match any custom CSS The HTML markup uses the BEM methodology with plyr as the block, e.g.plyr_controls. Use autoprefixer (you should be already!) as all declarations use the W3C definitions. You can use plyr.scss file included in /src/sass as part of your build and change variables to suit your design. You can set them in your CSS for all players: Whether to enable font antialiasing within the player. The color of the shadow when the audio scrubber handle/thumb is :active (pressed). plyr-audio-range-thumb-active-shadow-color The color of the shadow when the video scrubber handle/thumb is :active (pressed). plyr-video-range-thumb-active-shadow-color The height of the scrubber/progress track. The width of the shadow when the scrubber handle/thumb is :active (pressed). The fill color for the buffer indication in the scrubber for audio. The fill color for the buffer indication in the scrubber for video. The background color on the loading state in the scrubber. The size of the stripes in the loading state in the scrubber. The shadow below the border of the back button in the top of the sub menu pages. The border color for the bottom of the back button in the top of the sub menu pages. The size of the arrow on the bottom of the menu. The text/icon color used when audio controls are :hover, :focus and :focus-visible (equivalent). The background color used when video controls are :hover, :focus and :focus-visible (equivalent). The text/icon color used when video controls are :hover, :focus and :focus-visible (equivalent). The background color used for checked menu items. The space between controls (sometimes used in a multiple - e.g. ![]() The size of the icons used in the controls. The color for the background of captions. The background color for badges in the menu. ![]() The color used for the focus styles when an element is :focus-visible (keyboard focused). The background color of video and poster wrappers for using alpha channel videos and poster images. Here's a list of the properties and what they are used for: Name If you want to change any design tokens used for the rendering of the player, you can do so using CSS Custom Properties. If you do not wish to use Vi, you can set your own ads.tagUrl option.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |