You can embed a player with a coub video into your web page as an inline frame and control it via the JavaScript API.

To insert a video into an iframe you need a link to the video with the embed path in the URL (like this one: http://coub.com/embed/um0um0). You can get this code via oEmbed API.

You can write an iframe code yourself or just click on the "Embed" button on the Coub web page with the video. This will generate a complete HTML code of an iframe with the source link and predefined settings.

Setting the player

There are several settings that can be used with the iframe player. These settings should be added as query parameters to the src attribute of the iframe.

All the settings accept only one boolean value (can be either true or false):

• autostart — start the coub video automatically;
• noControls — don't show player's control buttons;
• hideTopBar — don't show control buttons located on top of the player;
• noHDControl — don't show the HD mode button;
• noSiteButtons — don't show the link to the Coub web site;
• originalSize — show the video with its original dimensions;
• startWithHD — start the video with the HD quality.

Here is an example of the code that embeds a player to a page and sets an id to it:

<iframe id="coubVideo" src="http://coub.com/embed/um0um0?muted=false&autostart=false&originalSize=false&hideTopBar=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="450" height="360"></iframe>

Controlling the player

Sending commands

You can manipulate an embedded player via postMessage function. Below is the list of commands that the player supports:

• play — start playing;
• stop — stop playing;
• mute — disable the sound;
• unmute — restore the sound back.

The following code shows how to send a command to a player:

var myCoub = document.getElementById('coubVideo').contentWindow;
myCoub.postMessage('play', '*');

Handling messages

An embedded player can send status messages to the parent window. The parent listens for following dispatched messages:

• playStarted — the video starts playing;
• playPaused — the video is paused;

The following code handles playStarted message:

var messageHandler = function(e) {
  if (e.data == 'playStarted'){
  console.log('Video starts playing');
  }
}
myCoub.addEventListener('message', messageHandler);