Dailymotion Story

To use Dailymotion Story you must create a player first through Partner HQ and get the {PLAYER_ID}.

Set the player’s Aspect ratio as 9:16 in the player creation menu.

Disable First-time viewable, Automatic recommendations, Autonext, player controls, and PIP from player settings

Set player “AutoStart” on

You also need to create or find a playlist to embed for your story. Learn more on how to create, sort, feed and embed playlists. When you are finished, add the {PLAYLIST_ID} to your embed code below.

Start Embedding

You need to do 2 things to embed the Player.

  1. Put the script at the very bottom before the body ends in your website 
    <script src="https://srvr.dmvs-apac.com/dm-story/dm-story.min.js"></script>
  2. Add <div class="dm-story" {PARAMS}></div> in your target body content.

Standard Embed Tag

<div class="dm-story" playlistId="{PLAYLIST_ID}" playerId="{PLAYER_ID}" ></div>

Parameters Available

Name Type Description
playlistId
Mandatory		 string Set playlist xid directly to the tag to embed playlist
PlayerId
Mandatory		 string You can get {PLAYER_ID} from Dailymotion partner HQ in the player tab, inside the embed menu. You can also set up a secondary {PLAYER_ID} in case the player gets flagged by Google Heavy Ads Intervention. Learn more.
numOfVideos number To specify the number of videos in the playlist. Default value: 7
scrollBy number To specify the number of slides to move at once in inline carousel.
baseStyle string You can set the base styling of your video thumbnail gallery. The default value is carousel i.e., thumbnails will show as a carousel. Or you can set it to grid style. To visualize the effects, please check examples below
thumbnail string You can set thumbnail resolution. Available values are here. By default, it is thumbnail_480_url
customConfig string To add advertising Config to pass unique keys for advertising purposes. You can add multiple values. See the embed example below.
dmPubtool string To add dmPubtool value to the player. By default, the value is pes-customembed-story.

Embed Example :

<div class="dm-story"
   playerId="xxxx"
   numOfVideos="10"
   baseStyle="carousel"
   thumbnail="thumbnail_360_url"
   customConfig="[dynamiciu]=23328537%2FAdParams_Test;[keyvalues]=category%3Dsports%26section%3Dvideo"
></div>

In the sample above for customConfig value, you can see the following text: %2f, %3d, and %26. These bits of text represent URL encoding, standing respectively for special characters /, =, and &. You can visit this URL encoding reference for a complete list.

Features:

CTA button:

The Dailymotion Story provides a feature to add CTA (Call to Action) button over the content of the video. To add CTA button you need to add <script type="application/json" id="dm_story_text"> tag before embed code for Stories. Data for CTA button can be set inside <script type="application/json"> as JSON format. Here is an example,

<script type="application/json" id="dm_story_text">
  {
    "x8cjx3c" : {
      "cta_card" :{
        "text": "Read the article",
        "link": "www.example.com"
      }
    },
    "x8cjx34" : {
      "cta_card" :{
        "text": "Explore more",
        "link": "www.example3.com"
      }
    }
  }
</script>

CTA buttons are implemented in the example pages as a demo.

Customizing styles:

Setting customConfig dynamically:

Dailymotion story provides a way to set two different customConfig based on the position of the video in the story. Below, the example shows how it can be achieved

<script type="application/json" id="dm_story_text">
  {
      "customConfig":{
         "value": "[premium]=true",
         "position": [2,4,7,10]
       }
  }
</script>
<div class="dm-story" playlistId="x6hzyp" numOfVideos="10" playerId="xfgl5" customConfig="[premium]=false"></div>

As you can see in the embed code, "[premium]=false" is the default value of customConfig for all videos in the story. "[premium]=true" will be applied to those videos having positions 2, 4 and so on. The position of the first video of the story is always considered 1. We have a demo in staging with the above configuration. Please contact us (Dailymotion Professional-Services ) for partner specific requests.

Lazy Loading Enhancement:

We’ve introduced Lazy Loading for image thumbnails in the card component to enhance performance. This implementation aligns with Core Web Vitals guidelines. No action is required on your part. If your story is located below the visible part of the webpage (below the fold), the image will automatically load in a lazy manner. You also can read to the official documentation here

Search Engine Friendly HTML Structure:

To enhance crawlability, we’ve restructured our HTML to be more search engine-friendly. You can simply sit back and enjoy the benefits without needing to take any action. Click this link to know further the overview on how search engine crawling and indexing our website.

Manage player flagged by Heavy Ads :

In 2020 Google introduced various measures for regulating online advertising in the Google Chrome browser. The Heavy Ad Intervention feature was released in order to identify and unload online ads that are deemed as ‘heavy’. Learn more .

If player is flagged by Heavy Ad, Dailymotion throws an event PLAYER_HEAVYADSINTERVENTION. Using that event, Dailymotion Story will try to load the player again. Loading again the player bypasses the heavy ad most of the time but not always.

Hence for the Dailymotion Story, we recommends always using two PLAYER_ID for playerId attribute. The second PLAYER_ID will be used for Heavy Ad Intervention.

In the absence of a second PLAYER_ID, Dailymotion Story will instead load a universal player library i.e., player.js for Heavy Ad Intervention.

<div class="dm-story" playlistId="{PLAYLIST_ID}" playerId="{PLAYER_ID_1},{PLAYER_ID_2}" ></div>

Interstitial Ads:

Web banners or banner ads can be added dynamically over a side in the fullscreen mode of the dailymotion story. It comes with a close ad button which lets you close the ad and play the video of the current slide. You can target any slide based on their indexes (starting from 0 ). Here is an example of showing interstitial ads for slides 3,5,7,....


<script>
  window.DailymotionStory = {};
  // to activate interstitial ads
  window.DailymotionStory.interstitialAds = {
      // set condition for slide index
      condition : (index) =>{
          if( index%2 == 0 ){
              return true;
          }else {
              return false;
          }
      },
      /**
       * @description :  if condition satisfied, story will create
       * adContainer then call this function
       * 
       * @param {HTMLElement} adContainer a htmlElement object for ads
       * @param {number} index slide index value, starts from 0
       */
      onCondition: (adContainer,index)=> {
          console.log(index);
          // add html for ads
          /**
           * example : 
           *  adContainer.innerHTML = `<div id="newswell-side-1" style="width: 300px; height: 250px;"></div>`;
           */
          // trigger the ad
          /**
           * example : 
           *    (adsbygoogle = window.adsbygoogle || []).push({});
           *     googletag.cmd.push(function() {
           *          googletag.display('newswell-side-1');
           *     });
           */
      }
  }
</script>

window.DailymotionStory is a global object that will be checked from the story script if present on the page.

window.DailymotionStory.interstitialAds is used to set up the interstitialAds.

you can also check out this demo of interstitial ads.

Events:

Dailymotion Story provides some CustomEvents on document to inform special activity. Example :

<script>
    // When the Dailymotion story enters fullscreen mode
    document.addEventListener("dm-story-enter-fullscreen",()=>{
        //Do something after the story enter the fullscreen
    });
    // get player object when dm story creates a player
    document.addEventListener("dmstory-player-create",(e)=>{
        console.log(e.detail); // {player: playerObject}
    })
</script>

Events Available:

Name Type Info Description
dmstory-player-create CustomEvent provides {detail:{player: playerObject }} inside event object Sent when player is created.
dm-story-enter-fullscreen CustomEvent Fire when the Dailymotion story enters fullscreen mode.  
dm-story-exit-fullscreen CustomEvent Fire when the Dailymotion story exits the fullscreen mode.  
This site is open source. Improve this page.