Video player documentation

Embedding the player

Dailymotion provides a simple way to display videos on your website or application: it is possible to embed Dailymotion video player using our iframe-based embed player. Note that our iframe embeds are compatible with most mobile platforms like iOS, Android, Windows Phone and most HTML5-compliant Smart TVs.

Embed a video in your native mobile app

For iOS and Android apps, you will have to use our dedicated Swift SDK or Android SDK.

Embed a video in your website

The simplest way to embed Dailymotion videos on your site is to use our iframe-based embed player.

There are three ways to retrieve an embed code for a given video:

However, if you plan to customise/control the video players programmatically, we advise you to use our dedicated JavaScript SDK.

Iframe embed HTML skeleton code

Regardless of the way you retrieve the embed code, it will always look more-or-less as follow:

<iframe frameborder="0" width="480" height="270"
allowfullscreen allow="autoplay"></iframe>


  • The width and height attributes will vary
  • VIDEO_ID is the ID of the video you will embed. ID can be of the form xID (e.g. xwr14q) for public-accessible videos or kID (e.g. kABCD1234) for private-accessible videos.
  • PARAMS are additional query-string parameters –documented in the Player parameters section– that allow you to customise the look and behavior of the player.
  • allowfullscreen attribute to allow the player to be placed into full screen mode. If this isn't set, the player can't be placed into full screen mode.
  • allow="autoplay" attribute to delegate the autoplay permission from the origin once received, as specified by the Feature Policy for autoplay specification. If this isn't set, the player will not be able to play without a user gesture.

Player parameters

The following parameters allow you to customise the look and behavior of the player.

There are two ways to pass them:

  • via query-string parameters in the embed <iframe>'s src attribute. For instance:
    <iframe frameborder="0" width="480" height="270"
    allowfullscreen allow="autoplay"></iframe>
  • via the params option of the DM.player() method from the JavaScript SDK. For instance:
    <script src=""></script>
    <div id="player"></div>
    var player = DM.player(document.getElementById("player"), {
        video: "xwr14q",
        width: "100%",
        height: "100%",
        params: {
            autoplay: true,
            mute: true
api['postMessage', 'location', '1']falseEnable the Player API. In native mobile apps, use api=location, otherwise we recommend using api=1.
autoplaybooleanfalseAutomatically attempt to start playback of the video. Note: some browsers might block this. Read more.
autoplay-mutebooleanfalseTry to autoplay, if it fails because blocked by the browser, try again by muting the video.
controlsbooleantrueWhether to display the player controls or not. This parameter only removes the control bar, but keeps the startscreen and the endscreen (useful on mobile devices where the video tag needs a direct user interaction to start the playback).
idstringN/AID of the player unique to the page to be passed back with all API messages.
mutebooleanfalseWhether to mute the video or not.
originstringN/AThe domain of the page hosting the Dailymotion player. When using api=postMessage, you might want to specify origin for extra security.
quality['240', '380', '480', '720', '1080', '1440', '2160']'auto'Specify the suggested playback quality for the video.
queue-autoplay-nextbooleantrueWhether to play automatically the next item in the queue.
queue-enablebooleantrueWhether to show the Up Next queue.
sharing-enablebooleantrueWhether to display the sharing button or not.
startnumber0Specify the time (in seconds) from which the video should start playing.
subtitles-defaultstringN/ASpecify the default selected subtitles language.
syndicationstringN/APass your syndication key to the player.
ui-highlightstring'ffcc33'Change the default highlight colour used in the controls (hex value without the leading #). Read our note on the the player customisation section.
ui-logobooleantrueWhether to display the Dailymotion logo or not.
ui-start-screen-infobooleantrueWhether to show video information (title and owner) on the start screen.
ui-theme['dark', 'light']'dark'Choose the default base colour theme. Read our note on the the player customisation section).

Deprecated player parameters

These deprecated parameters were once part of the player project but are no longer maintained. We still support them for now, but we recommend to remove reference to any of these as they may disappear without warning. Instead, we suggest an alternative parameter to replace it with.

Deprecated parameterCorresponding parameter for replacement

Player customisation

The Dailymotion player can be customised with:

  • either a highlight colour (used in the seek bar and to highlight some UI elements such as menu items)
  • or one of two themes (light or dark)

We use Luminance and Contrast algorithms to select the best theme for any given highlight (the same as those used on Lea Verou’s Contrast Ratio tool). This ensures that the highlight colour will always be clearly visible on the background colour.

Here are some rules regarding priorities between those two customisation settings:

  • if only a theme is requested, then we use the default highlight for the given theme.
  • if both a highlight and theme are requested, then the highlight always wins. If the colour contrast ratio is less than a given amount, we allow either theme but default to the dark one.
  • customisations made by the video owner trump those made by other users.


oEmbed is an open standard for allowing an embedded representation of a URL on third party sites. The oEmbed API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource: it turns a Dailymotion video page URL into structured data, returning among others an embed code. For more information, see the oEmbed specification. This protocol will be preferred when all you need is to transform a URL provided by one of your users into an embed code.

To request the embed code for a video from its url, you can use the following endpoint:

When doing so, you can pass some parameters as query-string parameters:

ParameterParameter description
url(required) The Dailymotion URL for a video.
maxwidthThe maximum width the embedded video can take on the destination page.
maxheightThe maximum height the embedded video can take on the destination page.
formatResponse format, either json or xml. Defaults to json.
callbackWhen returning JSON, wrap in this function.
autoplayAutomatically start playback of the video. Defaults to false.
syndicationYour syndication key.

Hence, a request is of the form:<VIDEO_URL>

For a list of response parameters, please have a look at the oEmbed specification. Dailymotion responds with an oEmbed response such as:

  "type": "video",
  "version": "1.0",
  "provider_name": "Dailymotion",
  "provider_url": "",
  "title": "Wildlife",
  "description": "a movie with animals",
  "author_name": "Dailymotion API",
  "author_url": "",
  "width": 480,
  "height": 269,
  "html": "<iframe src=\"\" width=\"480\" height=\"269\" frameborder=\"0\" allowfullscreen allow=\"autoplay\""></iframe>",
  "thumbnail_url": "",
  "thumbnail_width": 427,
  "thumbnail_height": 240

Player API

The Player API we document in this section is only available if you are using the JavaScript SDK.



Returns a Boolean. Whether the media resource plays automatically when available.


Returns a Number. The part of the media resource that has been downloaded in seconds.


Returns a Boolean. Whether the player controls are visible.


Returns a Number. The current playback position in seconds.


Returns a Number. The length of the media resource in seconds.


Returns a Boolean. Whether the media played to the end.


Returns an Object. The last error that occurred for this player (properties are code, title and message. This object format is as follow:

  code    : "42",
  title   : "Unknown issue",
  message : "An unknown issue has just occured!"


Returns a Boolean. The current fullscreen state.


Returns a Boolean. The current mute state.


Returns a Boolean. The current playback state.


Returns an Array. An array of the available qualities.

Possible qualities are as follow: ['240', '380', '480', '720', '1080', '1440', '2160'].


Returns a String. The current quality — see qualities for possible values.


Returns a Boolean. Whether the video element is seeking.


Returns a String. The current subtitle language code.


Returns an Array. An array of the available subtitles's language codes.


Returns a Number. The current volume – between 0 and 1.


Returns an Object. Contains the videoId and title of the video currently loaded in the player.

   videoId: 'x5e9eog',
   title: 'Dailymotion Hackathon Feb 2017',


addEventListener(event, callback)

  • event (String) – A string representing the event name to listen. See Events for a list of accepted events.
  • callback (Function) – The function to call when the event is triggered.

Registers and invokes the given callback every time event occur.

Example – listening to the volumechange event
player.addEventListener('volumechange', function(event) {
  console.log('event '+event.type+' received on ''!');

load(videoId, [params])

  • videoId (String) – A string representing a video ID – of the form xID (e.g. xwr14q) for public-accessible videos or kID (e.g. kABCD1234) for private-accessible videos.
  • params (Object) – An object containing player parameters.

Loads the video with the videoId ID in the player, with optional params.

Example – loading the video associated to the xwr14q xID
player.load('xwr14q', {
  autoplay: true,
  start: 30


Starts or resumes the current video's playback.

Example – resuming the current video's playback;


Pauses the current video's playback.

Example – pausing the current video's playback


  • seconds (Number) – The time in seconds to seek to.

Seeks to the current video's to seconds seconds.

Example – seeking to 30 seconds of the current video's playback;


  • enable (Boolean) – Whether to show or hide the controls.

Shows the controls when enable evaluates to true, hides them otherwise.

Example – hiding the controls


  • enable (Boolean) – Whether to enter or exit fullscreen.

Enters fullscreen when enable evaluates to true, exits it otherwise.

Example – entering fullscreen


  • enable (Boolean) – Whether to mute or un-mute the player.

Mutes the player when enable evaluates to true, unmutes it otherwise.

Example – muting the player


  • level (String) – The quality name to switch to – see qualities for accepted values.

Sets the current video's quality to the specified quality.

Example – setting the current video's quality to '720'


  • languageCode (String) – The subtitle's language code.

Sets the current video's subtitle to the specified language code.

Example – setting the current video's subtitle to 'fr'


  • level (Number) – The volume level to set – between 0 and 1.

Sets the player's volume to the specified level.

Example – setting the player's volume to 50% of its maximum


Toggles the player's controls visibility.

Example – toggling the player's controls


Toggles the player's mute state.

Example – toggling the player's mute state


Toggles the current's video playback state.

Example – toggling the current video's play state


Opens the current video on in a new tab.

Example – opening the current video's on in a new tab



Sent when the player reaches the end of an Ad media resource.


Sent when an Ad playback pauses.


Sent when an Ad playback starts.


Sent when the player starts to play an Ad media resource.


Sent on each Ad's time update.


Sent when the player is ready to accept API commands. Do not try to call functions before receiving this event.


Sent when the player's controls state changes (visible or hidden).


Sent when the duration of the video become available or change during playback.


Sent when playback has stopped at the end of the media resources set (ads + content).

ended - deprecated

Deprecated. Use video_end instead.


Sent when the player triggers an error.


Sent when the player enters or exits fullscreen.


Sent when video's metadata are available.


Sent when playback pauses after the pause method returns.


Sent when playback starts after the play method returns.


Sent every time a video is ready to play, or started playing (depending on autoplay settings, and their resolution by the browser), or is unable to play (blocked, restricted, unavailable). Listen to this event if you want to defer doing network-heavy and JavaScript-heavy work, to allow the optimal delivery of the first frames of the video to the user.


Sent when the content media resource playback has started.


Sent when the browser is fetching the media data.


Sent when qualities are available – see qualities for accepted values.


Sent when the current quality changes.


Sent when the player has completed a seeking operation.


Sent when the player is starting to seek to another position in the video.


Sent when the current subtitle changes.


Sent when subtitles are available.


Sent the first time the player attempts to start the playback, either because of a user interaction, an autoplay parameter, or an API call (e.g play(), load(), etc.).


Sent when the playback position changes as part of normal playback or because of some other condition.


Sent when the player starts to play the content media resource.


Sent when the player reaches the end of the content media resource.


Sent when a new video has been loaded in the player. (e.g. after calling load(videoId, [params]), or at player start-up).


Sent when the player volume or mute state has changed.


Sent when the player has to stop video playback for further buffering of content.