Dailymotion Previews

Dailymotion Previews are another implementation with Dynamic Previews. Previews let you surface top stories from your newsroom(s) and surface them across your site. By default, the previews redirect to your Dailymotion video page to improve monetization options.

Start Embedding

You need to do 2 things to embed the Previews.

Put the script at the very bottom before body end in your website

<script src="https://srvr.dmvs-apac.com/dm-preview/dm-preview.min.js"></script>

Add <div class="dm-preview" {PARAMS}></div> in your target of body content.

Standard Embed Tag

<div class="dm-preview" playlistId="{PLAYLIST_ID}"></div>

Parameters Available

Name	Type	Description
playlistId `Mandatory`	string	Set playlist xid directly to the tag to embed playlist
numOfVideos	number	To specify the number of videos in the playlist. Default value : `5`
syndication	string	Syndication key. Needed if the video content does not belong to your channel/network of channels AND/OR if you embed the Dailymotion Previews into specific 3rd party environments (Google AMP, Facebook IA, OTT products, in-app, operated but not owned web domains…). This enables tracking and targeting.
type	string	Can be set as `vertical`/ `horizontal` type of the preview. By default its `horizontal` i.e., `16:9` aspect-ratio

Example Links

Features:

Dailymotion Previews also provide features to customize the title and its CTA ( Call to Action ). By default clicking on a title will redirect to the Dailymotion video page.
To customize title, you need to add <script type="application/json" id="dm_preview_text" > tag before embed code for Previews.
Data for title card can be set inside <script type="application/json"> as JSON format.
Here is an example.
```
<script type="application/json" id="dm_preview_text">
  {
      "title_card": [
          {
              "video_id": "x847mil",
              "text": "Custom title for rahul gandhi"
          },
          {
              "video_id": "x82qaiq",
              "link": "https://www.example.com/customlink"
          }
      ]
  }
</script>
```
As you see above data, the title/CTA link of the video can be replaced from the default value where video_id is the mandatory field.

We provide CSS variables to change the color of the progress bar at the top the Dailymotion Previews.
Here is an example.

.dm-preview{
  /* To change background color of progress bar */
  --dm-preview-progress-bg: rgba(88, 89, 104,.5);
  /* To change color of progress bar */
  --dm-preview-progress-color: rgba(255,255,255,.5);
}

Example:

Title CTA card - playground

This site is open source. Improve this page.