Skip to main content

CSS

A few CSS variables are available to customize the appearance of the player:

/* default values */.ractive-player {  --rp-controls-height: 44px;  --rp-elapsed-color: #AF1866;  --rp-scrubber-color: #AF1866;  --rp-scrub-height: 6px;}
/* these ones control the aspect ratio --- default is 8/5 */@media (min-aspect-ratio: 8/5) {  :root {    font-size: 2vh;  }
  .ractive-player {    --rp-height: 100vh;    --rp-width: 160vh;  }
  .rp-canvas {    margin: 0 auto;  }}
@media (max-aspect-ratio: 8/5) {  :root {    font-size: 1.25vw;  }
  .ractive-player {    --rp-height: 62.5vw;    --rp-width: 100vw;  }  .rp-canvas {    top: calc((100% - 62.5vw) / 2);  }}

For example, to make a component occupy the full height of the canvas, but not be covered by the controls, you can write

.my-component {  height: calc(100% - var(--rp-controls-height));}