Table of content

Optimize ad inventory with contextual video embed


At no extra cost, learn how to embed contextually relevant videos in all your sections and articles, turning page views into video views and sellable inventory.

The contextual embed will help you by:

  • scaling automatically your video footprint throughout your website
  • generating significant volumes of audience and inventory

How does it work?

Two embed scenarios:

1. You already have a related video in the article body
Add a section with extra related video content.

2. Your articles don’t contain any video content
Embed videos in articles from your own pool of content or our premium publisher network.

Implementation

Step 1

Choose your ideal video placement in your html structure and control customization:

<div id="dm-contextual-embed"></div>

Step 2

Use this code sample to create your own script an adapt it in your js component:

/**
*  Contextual embed script: Perform a search to find a related video on Dailymotion using the API and embed the first video from the result
* 
*  Import the Dailymotion javascript SDK
*  <script src="https://api.dmcdn.net/all.js">
* 
*  Put a div tag with an id equal to "dm-contextual-embed"
*  <div id="dm-contextual-embed"></div>
* 
*  This script doesn't work with IE11, Android 4.4, iOS < 10, and below 
*/
(function() {   
    //ID of the Div tag where to append the player
    const divId = "dm-contextual-embed";
 
    //Minimum length of words to keep in title for the search
    const minWordLength = 3;
 
    //Maximum of words used for the search: more words you keep, less are chances to get a result
    const maxWordSearch = 4;
 
    //Get the title of the page and returns keywords about it
    const findKeywords = function(){
        const title = document.querySelector("h1") !== null ? 
                    document.querySelector("h1").textContent : "";      //find title on the provided tag name
        
        return  title.replace(/[^a-z0-9\-]/gmui, ' ')                   //Keep a to z letters, numbers and "-" from the title
                        .split(' ')
                        .filter(word => word.length >= minWordLength);  //Removes too short words
    }
 
    //API parameters used to perform the search
    const searchParams = {    
        'fields': "id,title",                     //keep only id to embed the video
        'private': 0,       
        'longer_than': 0.35,                      //Find videos with a duration longer than 21 seconds
        'flags': "no_live,exportable,verified",   //Find only embeddable videos and from verified catalog if no owners provided
        'sort': "relevance",
        'limit': 1,
        'search': findKeywords().sort((a, b) => b.length - a.length).slice(0, maxWordSearch).join(' ').substring(0,150) //Sort words by length and keep a stock as defined
    };
 
    //Player parameters used for the instanciation
    let playerParams = {
        'width': "960",
        'height': "540",
        'video': "x70val9", //default video id in case of no result
        'params': {
            'controls': true,
            'autoplay': false,
            'queue-enable': true,
            'queue-autoplay-next': true,
            'ads_params': 'contextual' 
        }
    }
    
    //Call the Dailymotion Platform API and search for results
    DM.api("/videos", searchParams, 
        function(response){
            console.log("%c DM contextual-embed ", "background: #56C7FF; color: #232323", "Search: " + searchParams.search);
            //if there is a result
            if("list" in response && response.list.length > 0){
                playerParams.video = response.list[0].id;
            } 
            else { console.log("%c DM contextual-embed ", "background: #56C7FF; color: #232323", "Cannot find related video. Default video used."); }
            
            //if the specific tag exist we launch the player with the video and display its title
            if(document.getElementById(divId) !== null){
                const elm = document.getElementById(divId);
                const titleTag = elm.appendChild(document.createElement("h3"));
                const playerTag = elm.appendChild(document.createElement("div"));
                
                const dmPlayer = DM.player(playerTag, playerParams);
                titleTag.textContent = response.list[0].title;
            }
            else { console.warn("DM contextual-embed Unable to create a player, did not find a div with id " + divId); }
        }
    );
})();

Step 3

Don’t forget to include our Javascript SDK in your project:

<script src="https://api.dmcdn.net/all.js">

The script will scan your article title, then the Dailymotion search API will be called with the keywords on top of any specified criteria (sorting filter, playlist, latest upload, category, language, set of channels…). It finally displays one embed with the most relevant video content within your defined destination placement (see step 2) for the player and title.

Customize the script according to your needs

Our solution can be customised to fit your specific needs and KPIs. Please read our Javascript SDK documentation to learn how to modify the script behavior yourself and maximise your revenues.