***
# Response Keys
The following is a description of the different keys used to render ads.
## In the Rendering Section
|
Key |
Description |
|---|---|
|
|
This parameter controls the visibility and color theme of player controls (play/pause, mute/unmute, closed captions, and the legal text “i” icon) to ensure sufficient contrast over the video background.
Required:
Default:
There are two default theme options for the control elements to ensure visibility over any video file provided: It can have one of the following values:
|
|
|
Standard option to open the link on current page or new page.
Ignored if no
Values:
|
|
|
Legal text add-on for the video.
Max
Desktop: visible on hover of the “i” icon; Mobile / App: always visible below the video. |
|
|
Video background color.
Required:
Default:
|
|
|
Video alt text.
Required:
|
|
Key |
Description |
|---|---|
|
|
A URL to load a VAST XML that includes all information to render the video part (left side). |
|
OR |
* |
|
|
A VAST XML to provide a video player |
|
Attribute |
Specification |
|---|---|
|
File size |
300 MB |
|
Supported file types |
MP4 |
|
Video ratio |
9:16 |
|
Min duration |
4 seconds |
|
Max duration |
30 seconds |
|
Attribute |
Specification |
|---|---|
|
Maximum characters |
90 characters, including spaces |
|
Attribute |
Specification |
|---|---|
|
Maximum characters |
120 characters, multi-line text field |
|
Attribute |
Specification |
|---|---|
|
File type |
|
|
Encoding |
UTF-8 |
|
Attribute |
Specification |
|---|---|
|
Redirection URL |
There are two possible redirection options:
|
The desktop version of the Commerce Video Grid Duet 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 Overview
The mobile version of the Commerce Video Grid Duet is designed as follows:
* The branding video zone is on the left,
* The product zone is on the right,
* 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.
***
## Asset Sizes and 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 `9:16`.
***
### Width Between 1200px and 1400px
* Between 1440 px and 1200 px browser width, the video remains fixed at 360 × 640 px (9:16 aspect ratio). As the grid narrows, surrounding elements (such as legal text) will wrap and reposition, but the video itself will not scale.
* Video consistently renders at `360 x 640 px` and maintains a 9:16 aspect ratio.
* The background color will appear behind the video asset while it’s letterboxed to fill the rest with the video container (top & bottom) to preserve its original aspect ratio.
***
### Width Between 768px and 1200px
* As grid width changes, the unit’s width and height scale automatically with the product grid, while keeping its aspect ratio of 9:16.
* The “Sponsored By” tag will sit below the unit at the bottom right.
* As grid width decreases, the video asset will consistently render, keeping its aspect ratio within the video container.
* The background color will appear behind the video asset while it’s letterboxed to fill the rest with the video container (top & bottom) to preserve its original aspect ratio.
* The legal text is locked at the top of the Video. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
***
### Width Between 480px and 768px
* Below `768 px`, the mobile unit renders and resizes to fit the grid width.
* The video asset will scale down to 22% of the video container's width, maintaining its 9:16 ratio.
* The video and product zone are each 50% of the entire unit.
* The buttons will now render horizontally at the top right of the video area and remain in that position as the video scales.
* The “Sponsored By” tag will sit below the unit at the bottom right.
* Legal text will now render below the video and product zone, across the entire unit. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
***
### Width Below 480px
* As grid width changes, the unit’s width and height adjust.
* The video will render at 100% of the unit's width. The buttons continue to render horizontally at the top right of the video area.
* The “Sponsored By” tag will sit below the unit at the bottom right.
* Legal text will now render below the video and product zone, across the entire unit. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
***