Examples

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.

<script>
!function(r,u,m,b,l,e) {
r._Rumble=b,r[b]||(r[b]=function(){
(r[b]._=r[b]._||[]).push(arguments);
if(r[b]._.length==1){
l=u.createElement(m),e=u.getElementsByTagName(m)[0],
l.async=1,l.src="https://rumble.com/embedJS/[pub-code]"+
(arguments[1].video?'.'+arguments[1].video:'')+"/?url="+
encodeURIComponent(location.href)+"&args="+
encodeURIComponent(JSON.stringify([].slice.apply(arguments))),
e.parentNode.insertBefore(l,e)
}})}(window,document,"script","Rumble");
</script>

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>
</iframe></figure>