> ## Documentation Index
> Fetch the complete documentation index at: https://developers.criteo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Commerce Video Spotlight

> Commerce Video Spotlight combines a branded 16:9 video with an interactive product zone that adapts to desktop and mobile layouts.

# Overview

The Commerce Video Spotlight format contains a video section with controls, and a product zone. On desktop, the product zone is presented beside the video. On mobile, the product zone appears below the video.

<Frame caption="Web (top) and mobile showcases (bottom) of the Commerce Video Spotlight format">
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/86438c4dccc0a97683489559f8e73f982a3303601a7db0bfea64e8762b4bffc7-CVS_fields.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=db3727e6f37b0c7257847d26d97bb2bd" alt="Web (top) and mobile showcases (bottom) of the Commerce Video Spotlight format" width="2250" height="1824" data-path="images/retailer-integration/docs/86438c4dccc0a97683489559f8e73f982a3303601a7db0bfea64e8762b4bffc7-CVS_fields.png" />
</Frame>

***

# Response Keys

The following is a description of the different keys used to render ads.

## In the Rendering Section

<table>
  <thead>
    <tr>
      <th>
        <p>
          Key
        </p>
      </th>

      <th>
        <p>
          Description
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <code>
            optional\_legal\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          Legal text add-on for the video. Max 90 characters long including spaces.
        </p>

        <ul>
          <li>
            <b>
              Desktop
            </b>

            : visible when you hover the “i” icon on the video.
          </li>

          <li>
            <b>
              Mobile and App
            </b>

            : visible at all times below the video.
          </li>
        </ul>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            optional\_redirect\_target
          </code>
        </p>
      </td>

      <td>
        <p>
          \_(only applicable for web). Can be ignored if no

          <code>
            ClickThrough
          </code>

          link is provided in the VAST.\_
        </p>

        <p>
          Redirection target, can have the following values:
        </p>

        <ul>
          <li>
            “

            <code>
              \_blank
            </code>

            ”: redirects to a new tab
          </li>

          <li>
            “

            <code>
              \_self
            </code>

            ”: redirects in the same tab
          </li>
        </ul>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            background\_video\_alt\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          Video alternative text
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            color\_mode
          </code>
        </p>
      </td>

      <td>
        <p>
          There are two default settings for the legal text box, buttons, and options (

          <code>
            play/pause
          </code>

          ;

          <code>
            mute/unmute
          </code>

          ; legal text “i” icon) to ensure visibility over any video file provided.
        </p>

        <p>
          It can have one of the following values:
        </p>

        <ul>
          <li>
            <code>
              lightcommand
            </code>

            : #000000
          </li>

          <li>
            <code>
              darkcommand
            </code>

            : #FFFFFF
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

***

## Format/Placement VAST Options

Depending on your integration configuration, you may find one of the following VAST options for the video placement in the ad response.

<table>
  <thead>
    <tr>
      <th>
        <p>
          Key
        </p>
      </th>

      <th>
        <p>
          Description
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <code>
            TagVideoVAST
          </code>
        </p>
      </td>

      <td>
        <p>
          A URL to load a VAST XML that includes all information to render the video.
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          OR
        </p>
      </td>

      <td>
        <p>
          \-
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            XmlVideoVAST
          </code>
        </p>
      </td>

      <td>
        <p>
          A VAST XML to provide a video player
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

# Sample Response

## Commerce Video Spotlight: VAST Tag

```json expandable theme={null}
{
    "status": "OK",
    "placements": [
        {
            "viewHome_API_desktop-Flagship": [
                {
                    "format": "CVS",
                    "products": [
                        {
                          "ProductId": "134679258",
                          "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=gLYh9%2fxsFGq%2b67gaahP4kVXGGZXfgfgU1JA8o1zBL%2bVeGhkRciu4XrLOsI4T7SC%2bNbEtyqg3GhqGgDtwtWLWaTC0EBVHxpNlqJcrfrUzWk3IBuDj7ZAr8t28y7EJfH3BnEZQxAvbjEP3nRJYq9z9TfOhi0mWVLYxVFIURTPBvcp0cVPY5qaHvmPC6%2bppv7TH9Kja6zXlrKhib2DOtKo4aEMw3FQqRbnCeTVdjqmFbHK8s%3d&ev=2",
                          "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=aLSOJrKI2G%2fY8SwmqYnI5SqMi2jvKfgfgnJDZb06hiInWkDeRqN4Tu%2fKZnJgmGIrIuQVurCYsVELSi%2byX2oOKpicAj5tACVgpEYVcGZxNOU68BYLhRUxn80y3s4USfHLmeeOvP9wxb6RlGyydpJ4U4k%2fM7uL3DawyB9O%2bC9qebO%2bKTIUZ2fbQV5EuwvNxzYqCcfSjxWkMF%2fC5XfdIeovQeU5%2b7UpYhV62LdPj910grWaLwAIZ1BFFDCShQC%2fNTvqXt&ev=2",
                          "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=S82J7C%2fY88eObEWE7XzLk2PMzSUfgfgTawyt81nDP2IJov%2byGjGihnQ6n4aM8AN03iCTSLqrRZTClsvRLjR3xIKFGaqgilehlQj2WuFQK5Eht9iUY9Pe9S9fRvms7BB055liFkgZqzmChn6L06LcP0MOPdwUT3dsUhokauwiziBsb3nVQF5k51wvEy%2fQ0YrxsM2ZlOOBmpNrWij8%2fnRxJiCMylA%2fOxqr6%2bJw5nCICO18dWz8SvNAyV0TeI2h9mUSk3jOljbyNUUAK%2fpNYfzRPDuw%3d%3d&ev=2",
                          "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=LQNEHBKa5%2bIRktK7%2bD%2fR5fgfgD1xYrFDDNLffHIbCiNsnssxDZSllOGbux%2f88BUiFFUTugPFOhm0oaM9DsesFQmoNghWjKaIr76vj9B7fcvNR1zZmYOOseWCbQZlkpozMPlugkYyH0W33iV6j2w%2fRdBY%2bQVgQT0BBmYdVPRODed3SIOgkAxOZF4upAfAxSf83%2bp4Nh8bvlY6b840bGvL9UMgQHy1FM8ncNj90PsUwnANQrLmidsAghSTnZELKUpQZYmFXAVPPk%2bBHu%2bpB6QhkK8twFzGcDVBp5MCtpmZGe%2brg%3d&ev=2",
                          "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=8yGOJDbiWkOj%2bHVuvsc59my1UyuWPnozIfwfOFm5ZtZmX4a4bi3IZLEYS57LOv59wkboF346v%2fKa4X8Zim7YSCjw9tNN2yBYCr%2fb%2fgfgb9QELv2JEprUOfBSZ1ZIwILrpD5CgOWkvQpEnYP137RzR4LFirlrSnfXe0Tanl8sHU5PjOXA%2f9iKHps%2bYB2aD35M02Br8%2fPx%2b2%2bDlQq4RKw4xMuAmnlafk2dUWI%2f%2bjGVwATj0LfINKS2LSt77USBGLOcWw5cDekIMvWptqyccI3oKCQQ%3d%3d&ev=2"
                        },
                        {
                            // other products
                        },
                    ],
                    "products_order": [
                        {
                            "products": [
                                "134679258"
                            ],
                            "isMandatory": false
                        },
                        {
                            // other products
                        }
                    ],
                    "rendering": {
                        "optional_legal_text": "This is the optional legal text.",
                        "optional_redirect_target": "_blank",
                        "background_video_alt_text": "this is the video alternative text",
                        "color_mode": "lightcommand",
                    },
                    "TagVideoVAST": "//rm-v.us5.eu.criteo.com/v?rm_e=cTPHYkD46JXqUp9svzl4FwDN_Re-KWTFmSn1QREFzvxlBjtyuwqDRDnVL8lIDel4Th9npJBHSThNiJLriLBlmmJlLg3E7oRRs-IIthJ3MTTQGMWNlOPHOebj8aiWu-YTK7Esx7vZ_fdMtLSLuHYbwqZnpT2xb3zqTJ96A2TPZWaVJPUqCO8KuUd5MBgT1mvs_o-L4lim6g9KZmIWT4c0EbOwA&ev=4",
                  	"OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=2DP313G8ktSXXaFvImaO4VKMqFSCkvmlcTz98dfgdfmtngUKQgwShE9%bvNSjDndYD%2bnpLT4PWDoNaCb862AMTvSopOdYNFGidZfBHggUmtpL%2fYOudEdDP7kANk%2bGmsBy3OCIm58C0uAYEJSHBdruRC%2fhbWLKUdZ2VdHdFwvBg8IT9Yt4V0DS%2bufcBDtvWbEhioZmIPaBY3uuykPSXyOlpMPFfHqZ%2bg%3d%3d&ev=2",
                    "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=YIfuO34D8lTreAuY8MIlZiNjtIYz48eDlYzK0kXFMIuhZjwV6cVwkirv6Tbbixk6Wgh7TLqia3Gw1uOcHcNCs%2f4hpPjT2yIGBXUv36EjR20dfgdfgsjFkZFPx8QGY9uakIYTCoH73BwvmoZdM5ForssG%2fkumRGMydeN9VqXHDdF8PxDvlVFUP3M%2fgFsSYQcCTO%2brLIhUs4%2bTKzg3mOxt%2fzSrsyOkQzOP7b7x5lupA2unc%3d&ev=2",
                    "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2f5W7GNmopfgN3f4DEpjSxb8eBUtw1dsIWqH82fbjaLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnFileClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2Nf4DE5lpjSxbBUtw1dsIWqH8%2fbjLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=EPQZxjkhpjUK980SuOfCsTUVMLvFuugK%2f7NaEZDdh5JUt8YNx8PZUKRY2b93LwBFzLYDA3EppPd336FlC3y9%2dfgdfgbUcOP6qdW5k27ef5KwplDMOMh%2bnhF%2blpeguQpact691q70oFry4KYaNbRhKHmCm9wtVmDBbiwGBNW77%2f0lIKintx2O3Dv%2fuCEymreHBITagpX7GXLP0pTQ6O0%2fdMEH%2fI4Z2dPtUHa3ps7G4V%2fvDspyR&ev=2"
                }
            ]
        }
    ],
}
```

***

## Commerce Video Spotlight: VAST XML

### Embedded in the JSON File

```json expandable theme={null}
{
  "status": "OK",
  "placements": [
    {
      "viewHome_API_desktop-Flagship": [
        {
          "format": "CVS",
          "products": [
            {
              "ProductId": "134679258",
              "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
            }
          ],
          "products_order": [
            {
              "products": ["134679258"],
              "isMandatory": false
            }
          ],
          "rendering": {
            "optional_legal_text": "This is the optional legal text.",
            "optional_redirect_target": "_blank",
            "background_video_alt_text": "this is the video alternative text",
            "color_mode": "lightcommand",
          },
          "XmlVideoVAST": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;VAST xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" version=\"4.2\"&gt;\n  &lt;Ad id=\"1234567890\"&gt;\n    &lt;InLine&gt;\n      &lt;AdSystem&gt;Criteo&lt;/AdSystem&gt;\n      &lt;AdTitle&gt;OnsiteVideo&lt;/AdTitle&gt;\n      &lt;Impression&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...]]>&lt;/Impression&gt;\n      &lt;Error&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>&lt;/Error&gt;\n      &lt;Creatives&gt;\n        &lt;Creative id=\"12345\"&gt;\n          &lt;Linear&gt;\n            &lt;Duration&gt;00:00:20.020&lt;/Duration&gt;\n            &lt;TrackingEvents&gt;\n              &lt;Tracking event=\"start\"&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"firstQuartile\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"midpoint\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"thirdQuartile\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"complete\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"mute\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"unmute\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"pause\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n              &lt;Tracking event=\"resume\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n            &lt;/TrackingEvents&gt;\n            &lt;VideoClicks&gt;\n              &lt;ClickThrough id=\"Criteo\"&gt;<![CDATA[https://retailer.com/category/test]]>&lt;/ClickThrough&gt;\n              &lt;ClickTracking&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>&lt;/ClickTracking&gt;\n            &lt;/VideoClicks&gt;\n            &lt;MediaFiles&gt;\n              &lt;MediaFile id=\"test_video\" delivery=\"progressive\" width=\"640\" height=\"360\" type=\"video/mp4\" scalable=\"true\" maintainAspectRatio=\"true\"&gt;\n                <![CDATA[https://static.criteo.net/design/dt/commerce_max/retailer/test_video.mp4]]>\n              &lt;/MediaFile&gt;\n            &lt;/MediaFiles&gt;\n          &lt;/Linear&gt;\n        &lt;/Creative&gt;\n      &lt;/Creatives&gt;\n      &lt;AdVerifications&gt;\n        &lt;Verification vendor=\"criteo.com-omid\"&gt;\n          &lt;JavaScriptResource apiFramework=\"omid\" browserOptional=\"true\"&gt;\n            <![CDATA[https://static.criteo.net/banners/js/omidjs/stable/omid-validation-verification-script-for-retail-media.js]]>\n          &lt;/JavaScriptResource&gt;\n          &lt;VerificationParameters&gt;<![CDATA[{\"beacons\": {\"omidTrackView\": \"...\"}}]]>&lt;/VerificationParameters&gt;\n          &lt;TrackingEvents&gt;\n            &lt;Tracking event=\"verificationNotExecuted\"&gt;<![CDATA[...]]>&lt;/Tracking&gt;\n          &lt;/TrackingEvents&gt;\n        &lt;/Verification&gt;\n      &lt;/AdVerifications&gt;\n    &lt;/InLine&gt;\n  &lt;/Ad&gt;\n&lt;/VAST&gt;"
        }
      ]
    }
  ]
}

```

***

### XML Video VAST Standalone

This is the content of `XmlVideoVAST` from the example above, presented as a standalone XML snippet for better readability.

```xml expandable theme={null}
<?xml version="1.0" encoding="utf-8"?>
&lt;VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
      version="4.2"&gt;
  &lt;Ad id="1234567890"&gt;
    &lt;InLine&gt;
      &lt;AdSystem&gt;Criteo&lt;/AdSystem&gt;
      &lt;AdTitle&gt;OnsiteVideo&lt;/AdTitle&gt;
      &lt;Impression&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...]]>&lt;/Impression&gt;
      &lt;Error&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>&lt;/Error&gt;
      &lt;Creatives&gt;
        &lt;Creative id="12345"&gt;
          &lt;Linear&gt;
            &lt;Duration&gt;00:00:20.020&lt;/Duration&gt;
            &lt;TrackingEvents&gt;
              &lt;Tracking event="start"&gt;<![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>&lt;/Tracking&gt;
              &lt;Tracking event="firstQuartile"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="midpoint"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="thirdQuartile"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="complete"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="mute"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="unmute"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="pause"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
              &lt;Tracking event="resume"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
            &lt;/TrackingEvents&gt;
            &lt;VideoClicks&gt;
              &lt;ClickThrough id="Criteo"&gt;
                <![CDATA[https://retailer.com/category/test]]>
              &lt;/ClickThrough&gt;
              &lt;ClickTracking&gt;
                <![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>
              &lt;/ClickTracking&gt;
            &lt;/VideoClicks&gt;
            &lt;MediaFiles&gt;
              &lt;MediaFile id="test_video"
                         delivery="progressive"
                         width="640"
                         height="360"
                         type="video/mp4"
                         scalable="true"
                         maintainAspectRatio="true"&gt;
                <![CDATA[https://static.criteo.net/design/dt/commerce_max/retailer/test_video.mp4]]>
              &lt;/MediaFile&gt;
            &lt;/MediaFiles&gt;
          &lt;/Linear&gt;
        &lt;/Creative&gt;
      &lt;/Creatives&gt;
      &lt;AdVerifications&gt;
        &lt;Verification vendor="criteo.com-omid"&gt;
          &lt;JavaScriptResource apiFramework="omid" browserOptional="true"&gt;
            <![CDATA[https://static.criteo.net/banners/js/omidjs/stable/omid-validation-verification-script-for-retail-media.js]]>
          &lt;/JavaScriptResource&gt;
          &lt;VerificationParameters&gt;
            <![CDATA[{"beacons": {"omidTrackView": "..."}}]]>
          &lt;/VerificationParameters&gt;
          &lt;TrackingEvents&gt;
            &lt;Tracking event="verificationNotExecuted"&gt;<![CDATA[...]]>&lt;/Tracking&gt;
          &lt;/TrackingEvents&gt;
        &lt;/Verification&gt;
      &lt;/AdVerifications&gt;
    &lt;/InLine&gt;
  &lt;/Ad&gt;
&lt;/VAST&gt;

```

***

# Specifications

## General

* The Commerce Video Spotlight unit is composed of two parts:
  * A **branding video zone**
  * A **product zone**
* The branding zone dimensions will only allow a **16:9** ratio.
* The format must be able to host up to **5 products**, which is also the maximum number of products.
* The product zone is clickable. The user can click on the product zone to be redirected to the product detail page.

***

## Video Specifications

The video asset must meet the following requirements:

<table>
  <thead>
    <tr>
      <th>
        <p>
          Attribute
        </p>
      </th>

      <th>
        <p>
          Specification
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <b>
            File size
          </b>
        </p>
      </td>

      <td>
        <p>
          ≤300 MB
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Supported file types
          </b>
        </p>
      </td>

      <td>
        <p>
          MP4
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Video ratio
          </b>
        </p>
      </td>

      <td>
        <p>
          16:9
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Min duration
          </b>
        </p>
      </td>

      <td>
        <p>
          4 seconds
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Max duration
          </b>
        </p>
      </td>

      <td>
        <p>
          30 seconds
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Max dimensions
          </b>
        </p>
      </td>

      <td>
        <p>
          640 x 360 px
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

### Legal Text Option

<table>
  <thead>
    <tr>
      <th>
        <p>
          Attribute
        </p>
      </th>

      <th>
        <p>
          Specification
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <b>
            Maximum characters
          </b>
        </p>
      </td>

      <td>
        <p>
          90 characters (including spaces)
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

### Alt Text

<table>
  <thead>
    <tr>
      <th>
        <p>
          Attribute
        </p>
      </th>

      <th>
        <p>
          Specification
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <b>
            Maximum characters
          </b>
        </p>
      </td>

      <td>
        <p>
          120 characters, multi-line text field
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

### Closed Captions

<table>
  <thead>
    <tr>
      <th>
        <p>
          Attribute
        </p>
      </th>

      <th>
        <p>
          Specification
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <b>
            File type
          </b>
        </p>
      </td>

      <td>
        <p>
          <code>
            .vtt
          </code>
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <b>
            Encoding
          </b>
        </p>
      </td>

      <td>
        <p>
          UTF-8
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

## Desktop

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/d8b675a6f8f3da1405822917e8acf02a1c334d76bca6f4b3a6393cec37d321ff-CVS_general_desktop.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=4ccf763beb203c781e1668baafbf6d88" alt="FS_desktop.jpg" width="1908" height="495" data-path="images/retailer-integration/docs/d8b675a6f8f3da1405822917e8acf02a1c334d76bca6f4b3a6393cec37d321ff-CVS_general_desktop.png" />
</Frame>

* The desktop version of the Commerce Video Spotlight is designed as follows:
  * The **branding video zone** is on the left,
  * The **product zone** is on the right.
* The product zone includes clickable navigation arrows that allow the user to change the displayed product. If there is only one product in the carousel, the arrows will not display.

***

## Mobile

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/5ad838ffc44832d932b137a7da22f0d0adca0d876239e16f336f80c66fe809df-CVS_general_mobile.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=237400ee53e2f9f344af983f67d40d06" alt="5ad838ffc44832d932b137a7da22f0d0adca0d876239e16f336f80c66fe809df CVS_general_mobile" width="756" height="786" data-path="images/retailer-integration/docs/5ad838ffc44832d932b137a7da22f0d0adca0d876239e16f336f80c66fe809df-CVS_general_mobile.png" />
</Frame>

* The mobile version of the Commerce Video Spotlight is designed as follows:
  * The **branding video zone** is on the top,
  * The **product zone** is on the bottom. The height is defined by the retailer.
* The user can browse the product using the horizontal slider. Below, some dots indicate the user's position on the slider. There is one dot per product. The product viewable dot should be darker to indicate the position. If there is only one product in the slider, the dot is not displayed.

***

## Available Options

The following optional settings allow advertisers to customize the interaction and appearance of the Commerce Video Spotlight format.

### Redirection

The branding zone can be clickable and contains the redirection. The user can click anywhere, except on the buttons and legal text, to be redirected.

* When a user clicks on the video:
  * If a redirection link (`ClickThrough`) is provided in the VAST XML, users should be redirected to this link.
  * If a redirection link is not provided in the VAST XML, the video should pause/resume.

<table>
  <thead>
    <tr>
      <th>
        <p>
          Condition
        </p>
      </th>

      <th>
        <p>
          Behavior
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <code>
            ClickThrough
          </code>

          link present
        </p>
      </td>

      <td>
        <p>
          Opens the target URL
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          No

          <code>
            ClickThrough
          </code>

          link
        </p>
      </td>

      <td>
        <p>
          Video toggles play/pause
        </p>
      </td>
    </tr>
  </tbody>
</table>

* There are two possible redirection options:
  * `_self` (opens in the same tab),
  * `_blank` (opens in a new tab).

***

### Legal Text

Legal text can be added as an option (90 characters maximum, including spaces).

If the option is enabled:

* While hovering over the video, an **(i)** icon is displayed in the top-left corner, like so:

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/b7542f09805f9103899300f89b206b77d8eb725a75be6859c6984fb4d3fc2b22-CVS_general_desktop_hover__legal.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=f5ac9e3180ada7616e58a162c4952be5" width="1908" height="498" data-path="images/retailer-integration/docs/b7542f09805f9103899300f89b206b77d8eb725a75be6859c6984fb4d3fc2b22-CVS_general_desktop_hover__legal.png" />
</Frame>

<br />

* When hovering the **(i)** icon, the legal text is displayed on top of the video like so:

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/754be63655d5a14a46f097e50bd64730d8a2b82eff57ee722d2e6500c700c8c1-CVS_general_desktop_hover__legal_hovered.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=8cc7e90ca300aa07aea99ca1a23ff1fb" width="1908" height="498" data-path="images/retailer-integration/docs/754be63655d5a14a46f097e50bd64730d8a2b82eff57ee722d2e6500c700c8c1-CVS_general_desktop_hover__legal_hovered.png" />
</Frame>

<br />

* On mobile screens, the legal text will always display between the **branding video zone** and the **product zone**, increasing the unit's total height.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/ee5fd6df419930a56fa9c5eca6e91d4c482457ad7010744112e9bc95c3c0d5e7-CVS_general_mobile__legal.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=db38e4f8b8c8808af73690549da21c03" width="756" height="876" data-path="images/retailer-integration/docs/ee5fd6df419930a56fa9c5eca6e91d4c482457ad7010744112e9bc95c3c0d5e7-CVS_general_mobile__legal.png" />
</Frame>

***

### Color Mode

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/2eafb6450f2d9e17fc14286bfcb444a1034894bfde9441d43171d1a876663058-CVS_color_mode.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=9ef1bd089dc11629576a6bb0f5965193" alt="2eafb6450f2d9e17fc14286bfcb444a1034894bfde9441d43171d1a876663058 CVS_color_mode" width="2250" height="819" data-path="images/retailer-integration/docs/2eafb6450f2d9e17fc14286bfcb444a1034894bfde9441d43171d1a876663058-CVS_color_mode.png" />
</Frame>

The advertiser can choose between two preset color modes to ensure the best contrast between the buttons and the video. Buttons and options appear while hovering over the **Branding Zone**.

#### Light mode

* Background color: `#FFFFFF` 80%
* Icon color: `#6A6A6A`
* Legal text color: `#000000`

#### Dark mode

* Background color: `#6A6A6A` 80%
* Icon color: `#FFFFFF`
* Legal text color: `#FFFFFF`

***

## Technical Details

#### Global

* The border should be fixed to `1px` and should surround the video creative and the product zone.
* Depending on placement size, the format dimensions may vary. However, the video ratio will remain constant at 16:9.

<Frame
  caption="Placement width ≥ `888 px`
Fixed height of 250 px. The product zone adapts to the placement in width"
>
  <img
    src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/d62e0d75e79668f552b9ecdd0735ccbd7df941aa13a18a9d32b2795baf4696ef-CVS_888.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=f5d53d0b471a5ef011e7d9360fbc1327"
    alt="Placement width ≥ `888 px`
Fixed height of 250 px. The product zone adapts to the placement in width"
    width="2682"
    height="498"
    data-path="images/retailer-integration/docs/d62e0d75e79668f552b9ecdd0735ccbd7df941aa13a18a9d32b2795baf4696ef-CVS_888.png"
  />
</Frame>

<Frame
  caption="`600px` \< placement width \< `888px`
The branded zone and the product zone are the same size. The whole format scales to fit the placement in width. Height will vary."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/bd486271c5ecc4ed5336ea4dd2f3da9718e64bcf64d49a2f582f418142e87175-CVS_600-888.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=32a05be420bdef37f183d6ccead89fae"
    alt="`600px` \< placement width \< `888px`
The branded zone and the product zone are the same size. The whole format scales to fit the placement in width. Height will vary."
    width="1761"
    height="498"
    data-path="images/retailer-integration/docs/bd486271c5ecc4ed5336ea4dd2f3da9718e64bcf64d49a2f582f418142e87175-CVS_600-888.png"
  />
</Frame>

<Frame
  caption="`445px` \< placement width \< `600px`
The branded zone is 65% of the placement width. The product zone is 35% of the placement width.
Height will vary."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/9fc2e7accee50b97f3eec02933d73b943c69a349a46fc39b066d5ecfedac56b9-CVS_445-600.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=a64dac80afb3a20580e3ab7663976f1b"
    alt="`445px` \< placement width \< `600px`
The branded zone is 65% of the placement width. The product zone is 35% of the placement width.
Height will vary."
    width="1356"
    height="498"
    data-path="images/retailer-integration/docs/9fc2e7accee50b97f3eec02933d73b943c69a349a46fc39b066d5ecfedac56b9-CVS_445-600.png"
  />
</Frame>

<Frame
  caption="Placement width \< `445px`
The ad unit switches to mobile.
Height will vary."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/f467585db743ab76dd38bec5da6d517cbc67697f9df67c1b454bb426bced08de-CVS_general_mobile.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=559e6913f62b224871edb5f84710b834"
    alt="Placement width \< `445px`
The ad unit switches to mobile.
Height will vary."
    width="756"
    height="786"
    data-path="images/retailer-integration/docs/f467585db743ab76dd38bec5da6d517cbc67697f9df67c1b454bb426bced08de-CVS_general_mobile.png"
  />
</Frame>

<br />

#### Desktop (placement width > 445 px)

* When multiple products are available, the navigation arrows always have the same position within the product zone. Arrows design is customizable to match the retailer UI and native components.
* When only one product is available, the navigation arrows are no longer displayed and the product listing is centered horizontally and vertically in the product zone.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/9d22c2925ff537611d45918c5efe8b4f269bd622f87d6686ffef13e19b55d362-CVS_desktop_1_product.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=25d7cd51565ae997fcb6c201744c15ea" alt="9d22c2925ff537611d45918c5efe8b4f269bd622f87d6686ffef13e19b55d362 CVS_desktop_1_product" width="2175" height="498" data-path="images/retailer-integration/docs/9d22c2925ff537611d45918c5efe8b4f269bd622f87d6686ffef13e19b55d362-CVS_desktop_1_product.png" />
</Frame>

<br />

#### Mobile (placement width ≤ 445 px)

* There is 10 px padding around each product listing.

  <br />

  <Frame>
    <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/8edcd2c553a81d84d73ecb3582ff4d88a7fdb44d285892c39382b7cddc7d6424-CVS_mobile_spacings.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=c78b79adbd0560831e0538c7c77b2331" alt="8edcd2c553a81d84d73ecb3582ff4d88a7fdb44d285892c39382b7cddc7d6424 CVS_mobile_spacings" width="756" height="792" data-path="images/retailer-integration/docs/8edcd2c553a81d84d73ecb3582ff4d88a7fdb44d285892c39382b7cddc7d6424-CVS_mobile_spacings.png" />
  </Frame>
* Dots indicate the different products for a user to view. Dots design is customizable to match the retailer UI and native components.
* When the user releases the slide, the main product displayed is the one with the highest percentage of display.
* When multiple products are available :

  * For the products on the left and right, 80% of the first product is in view and 20% of the secondary product is in view.

    <br />

    <Frame>
      <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/862aef0271540166b2ceffe402b646f348e39d5fbefb22afa6bc18c8a31c0eba-CVS_mobile_80_20.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=364313eb633d7e361ee0929d080aeeb4" alt="862aef0271540166b2ceffe402b646f348e39d5fbefb22afa6bc18c8a31c0eba CVS_mobile_80_20" width="756" height="792" data-path="images/retailer-integration/docs/862aef0271540166b2ceffe402b646f348e39d5fbefb22afa6bc18c8a31c0eba-CVS_mobile_80_20.png" />
    </Frame>
  * For the other products, 80% of the main product is in view and 10% of the products on each side are in view.

    <br />

  <Frame>
    <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/f63d0e00c422ba37a4750e62957b6476c9f0ca86abade792a03d30a9e0d8e917-CVS_mobile_10_80_10.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=19e7c75f5efaa3495968b30aabf488aa" alt="f63d0e00c422ba37a4750e62957b6476c9f0ca86abade792a03d30a9e0d8e917 CVS_mobile_10_80_10" width="756" height="792" data-path="images/retailer-integration/docs/f63d0e00c422ba37a4750e62957b6476c9f0ca86abade792a03d30a9e0d8e917-CVS_mobile_10_80_10.png" />
  </Frame>
* When only one product is available, the navigation dots and the border around the product zone are no longer displayed. The product listing is centered horizontally and vertically in the product zone.

  <br />

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/28347b1155b3d55857a170a2fd38e6b65ebe37016a2fa8901c5be06b1b2ba319-CVS_mobile_100.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=c6c7cfed13dc5b783a5e009cc3766973" alt="28347b1155b3d55857a170a2fd38e6b65ebe37016a2fa8901c5be06b1b2ba319 CVS_mobile_100" width="756" height="738" data-path="images/retailer-integration/docs/28347b1155b3d55857a170a2fd38e6b65ebe37016a2fa8901c5be06b1b2ba319-CVS_mobile_100.png" />
</Frame>

***

<br />

## What's next

* [Branding Video Standout](/retailer-integration/docs/branding-video-standout)
* [Commerce Video Grid Duet](/retailer-integration/docs/commerce-video-grid-duet)