Player Examples

  • The following is an example of an iframe embed with the publisher code and video id highlighted for use with the new javascript player:

    <iframe src="https://rumble.com/embed/uabcd.vabcd/?rel=5" frameborder="0" allowfullscreen></iframe>
  • To embed using the javascript player you must create a container to place the player into like a div:

    <div id="rumblePlayer"></div>
  • You must also load the javascript library required for the player while replacing the [pub-code] with the appropriate publisher code that always starts with “u”. This can be grabbed from any embed code and only contains numbers and letters.

    !function(r,u,m,b,l,e) {
  • To initialize the player you call the function

    Rumble("play", [config]);
  • The following are mandatory config parameters that every player must have:

Parameter Example Value Description
video "vabcd" Video ID of the video you want to be loaded
div "rumblePlayer" The ID of the container on the page you want the Rumble player loaded in
  • Example with the above options:
Rumble("play", {video: "vabcd", div: "rumblePlayer"});
  • Optional config parameters:
Parameter Example Value Description
rel 5 Related content to use at the end of the video, this is also used for the next video timer at the end of the video.
0 – disable related
1 – enable related
5 – enable related, use only videos from the same channel or user as the current video
ia 1 Use optimizations for instant articles, this will fix possible sizing issues
0 – disabled
1 – enabled
playlist ["v1235", "v1236"] The video IDs listed here will replace what content is used in the auto timer at the end of the video
api function(api){...} When specified the player will call the function provided (when the player loads) with a class you can interface with to control the player instance. To see more documentation on the calls available look to the next section of this document.
refadd player_placement=top&ctp=1 Optional, the string will be used for reporting purposes, it will be appended to the end of the URL. Please note, you do not provide a '?', the player will automatically parse it and add it if needed.
opts ["enablesnd","nopreload"] List of options to enable in the player:

"enablesnd" - show Enable sound overlay even over the video
"nopreload" - do not prepare the video for playing
"cssleak" - use only when a page's CSS has altered the appearance of the player, likely there is an improper approach utilized on your page if this option is needed
"force_ga_load" - the player will wait/try to use GA on your page, this options skips this check and loads GA on it's own without waiting
ui {logo:{"display-min":600}} If you have a custom player, you will be able to control when specific UI elements render.

Here is a list of available controls:
"fullscreen" - icon for making the player fullscreen
"logo" - logo of the player
"play" - play/pause button
"scrubber" - video scrubber/seek bar
"settings" - gear icon, used for changing resolutions
"sound" - mute/sound levels
"time" - current time/duration of video

Here are the available settings you can specify for them:
"display-min" - width of player needed to display this control (ie: 600 would make the element disappear when the player is smaller than 600px)
"display-max" - maximum width of player for displaying element
"display-pmode" - only display element when the player is "ctp" or "autoplay"
"hidden" - setting this to any value will make the element always hidden
  • To load the player in an instant article a non-async approach should be used, and the video IDs are duplicated like so:
<figure class="op-interactive"><iframe>
<div id="rumblePlayer"></div>
<script src="https://rumble.com/embedJS/uabcd.vabcd/"></script>
<script >Rumble("play", {video: "vabcd", div: "rumblePlayer", rel: 5, ia: 1})</script>