Drop and Player user guide

Owned by Julian Taborda Giraldo
Last updated: Jul 19, 2021 by Vallo Pooler
5 min read

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

Historical video integration challenges for sportsbook operators have been addressed by a simple JavaScript tag dropped onto your sportsbook or OTT fixture page. 

Once the script is embedded [with your customer and fixture ID] all available video content will display.



  • NO GEO-BLOCKING REQUIRED 

    All content available in all territories

  • NO CONDITIONAL VIEWING ACCESS REQUIRED

    No bet token exchange or complex back-end integrations

  • NO RESTRICTIONS ON SCREEN SIZE OR RESOLUTION

    You can go full screen in HD resolution

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. SCHEDULED FIXTURES
  5. 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=YOUR_CUSTOMER_ID&fixtureId=100001">
</script>

Insert an element with defined id to attach the video player to it, should be the exact same one used as the script containerId parameter

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



When using the Drop and Play videoplayer inside an iframe it requires an additional attribute in order to enable the fullscreen control.


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.

The color of icons, text, and the big play button border is defined as

--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.

Check this example for further reference.

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.

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.

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.

Slider - used for Volume bar and Progress bar

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)

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

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



HTML EXAMPLE – html file
CSS EXAMPLE – css file


A list of the scheduled fixtures can be retrieved using the following url:
https://drop-and-play-back.betstream.betgenius.com/schedule/book-maker/:id

and replacing :id with the proper bookmaker id number.


Through a partnership with Kiron, Betgenius provides Virtual betting and video. Integration of both the betting and video content can be done in parallel, to display wherever customers desire within their products.

This guide outlines the integration for the video. For the betting content please see the link below. Note that the betting content schema is common to existing Betgenius PreMatch betting content:

Link

Along with our regular fixture schedule, the D&P can be used to display virtual competitions, for your site to display these competitions you can introduce an iframe to the following URL:

https://drop-and-play.betstream.betgenius.com/iframe?source=CUSTOMER_ID&fixtureId=-NEGATIVE_ID

As the source parameter you should provide your customer id, as a fixtureId a negative value should be provided as negative ids are reserved for virtuals sports.

An example of the code that will load the virtuals player in an iframe would be:

<iframe src="https://drop-and-play.betstream.betgenius.com/iframe?source=8037&fixtureId=-someId" title="Virtuals"></iframe>

Using the virtuals player comes with a few restrictions as you can not provide the controls parameter or the ad parameter to the player.


For further references, you can check VideoJs  skins page