Page Comparison

Betgenius Drop and Play is our easy-integration feature designed to get your live sports video content up and running quicker quickly and with minimal friction.

...

Please note, if you are not an existing Betgenius customer, we will require a fixture list to match your fixture ID’s to our video content.

You can find the full user manual for Drop and Play below.  If you have further questions around the product or the integration of our video content services, please contact us.

1. DROP AND PLAY USER GUIDE
2. STYLING DROP AND PLAY
   1. MAIN VARIABLES
   2. VIDEO JS
   3. BIG PLAY BUTTON
3. USAGE EXAMPLE
4. REFERENCES

Insert a script tag defining the desired fixture the bookmaker source and containerId where the video player will attach:

<script
  src="https://drop-and-play.betstream.betgenius.com/widgetLoader?
  containerId=elementId&source=8037YOUR_CUSTOMER_ID&fixtureId=100001">
</script>

...

<div id="elementId" class="videocontainer"></div>

Image Modified

MAIN VARIABLES

We are using CSS custom properties (variables), feel free to modify variables with your preferred color scheme or use a more specific style in each element.

...

--primary-foreground-color: #0f0; #fff default

The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames.

--primary-background-color: #2b333f; #2B333F

Here we use some primary colors to create a theme with some basic styling.

.videoContainer {
  --primary-foreground-color: white;
  --primary-background-color: black;
  --slider-bg-color: red;
  --slider-load-progress-color: gray;
}

VIDEO JS

The base font size controls the size of everything, not just text. All dimensions use em-based sizes so that the scale along with the font size. Try increasing it to 15px and see what happens.

The main font color changes the ICON COLORS as well as the text.

.videoContainer .video-js {
  font-size: 10px;
  color: var(--primary-foreground-color);
}

BIG PLAY BUTTON

The "Big Play Button" is the play button that shows before the video plays. To center it set the align values to center and middle. The typical location of the button is the center, icons, but there is trend towards moving it to a corner where it gets out of the way of valuable content in the poster image.

.vjs-default-skin .vjs-big-play-button {
/* We're using css vars here because the values are used in multiple places.
     Now that font size is set, the following em values will be a multiple of the
     new font size. If thelighten font-size is 3em (30px), then setting any of
     the following values to 3em would equal 30px. 3 * font-size.
*/
  --big-play-width: 3em;
  /* 1.5em = 45px default */
  --big-play-height: 1.5em;

/* The font size is what makes the big play button...big.
     All width/height values use ems, which are a multiple of the font size.
     If the .video-js font-size is 10px, then 3em equals 30px.*/
font-size: 3em;

line-height: var(--big-play-height);
height: var(--big-play-height);
width: var(--big-play-width);

/* 0.06666em = 2px default */
border: 0.06666em solid var(--primary-foreground-color);
/* 0.3em = 9px default */
border-radius: 0.3em;

/* Align center */
left: 50%;
top: 50%;
margin-left: (var(--big-play-width) / 2);
margin-top: (var(--big-play-height) / 2);
}

The default color of control backgrounds is mostly black but with a little bit of blue so it can still be seen on all-black video frames. which are common.

.videoContainer .video-js .vjs-control-bar,
.videoContainer .video-js .vjs-big-play-button,
.videoContainer .video-js .vjs-menu-button .vjs-menu-content {
background-color: var(--primary-background-color);
}

Slider - used for Volume bar and Progress bar

.videoContainer .video-js .vjs-slider {
  drop-and-play.betstream.betgenius.combackground-color: var(--slider-bg-color);
}

The slider bar color is used for the progress bar and the volume bar (the first two can be removed after a fix that's coming)

.videoContainer .video-js .vjs-volume-level,
.videoContainer .video-js .vjs-play-progress,
.videoContainer .video-js .vjs-slider-bar {
  background: var(--primary-foreground-color) ;

The main progress bar also has a bar that shows how much has been loaded:

.videoContainer .video-js .vjs-load-progress {
background: var(--slider-load-progress-color);
}

The load progress bar also has internal divs that represent smaller disconnected loaded time ranges:

.videoContainer .video-js .vjs-load-progress div {
background: var(--slider-load-progress-color);
}

Image Modified

HTML EXAMPLE – html file
CSS EXAMPLE – css file

For further references, you can check VideoJs  skins page

...