Video Recommendations — Watch Next, Play Button on the Picture is a design for a Content Recommendations widget that shows videos the way video sites do. Each card has a 16:9 picture with a play button in its middle and the video’s length in a corner, under a Watch next heading, and a click opens the video in a new tab. It is the Content Recommendations — Slider, Row or List design with a video look. The engine, the algorithms, the layouts and the settings are all the same, so you can switch a content widget to this look and back again.
p->DURATION. Until then no card shows a length.When to use it
- A video site or a video section: “watch next” under a video, or a rail of videos on a home page.
- A blog or a magazine with video posts: show the videos as videos, and the articles with a design made for articles.
- Videos on YouTube: links open in a new tab by default, so the visitor keeps your page.
To draw the videos with your own code instead, use the Video List template of the Content Recommendations JSON Feed.
Add it
- In a Content Recommendations campaign, open the Content step. Under What should it show?, pick Content recommendations (or use Add action).
- In the gallery, choose Video Recommendations — Watch Next, Play Button on the Picture. It is the seventh design, after the six others.
- Choose which videos it recommends, exactly as for any content widget. See the Content Recommendations Wizard.
To give a widget you already have the video look, open it and press Change template.
What is different from the article design
| Part | In this design |
|---|---|
| Picture | 16:9 in every layout, cropped from the middle. A YouTube thumbnail is 4:3 with black bars above and below the frame, and the crop cuts those bars away. In the slider, a fixed Image Height still wins over the 16:9 shape. |
| Play button | In the middle of each picture. It only marks the card as a video: the whole card stays the link, and its clicks are counted as usual. |
| Length | In a corner of the picture, from the catalog column you name. A video with an empty column shows no length. |
| Heading | Watch next. It takes your page’s own text colour, so it can be read on a light page and on a dark one. |
| Links | Open Links In starts on a new tab. |
| Words | The settings speak of videos (Video Cards, Video Title, Video Link, Video Picture). The link under each card reads Watch now →, and the social proof counts views. |
Play Button & Length
The design’s own section of settings, after Video Cards:
| Setting | What it does |
|---|---|
| Show Play Button | On by default. |
| Play Button — Shape | Circle (the default), Rounded rectangle or Triangle only. |
| Play Button — Show On | Every item, or Only items with a length. Use the second when your catalog mixes videos and articles, so an article never shows a play button. It needs Show Video Length on. |
| Play Button — Size | How tall it is, 56px by default. On a small picture it shrinks to fit, never more than about half the picture’s height. |
| Play Button — Icon Colour and Background | The triangle, and the circle or rectangle behind it. Triangle only has no background. |
| Play Button — On Hover | No change, Accent colour or Grow slightly, while the pointer is over the card. |
| Play Button — Style | Anything else about the button. By default it has a light ring and a soft shadow, so it shows on a dark picture as well as a light one. |
| Show Video Length | The length badge on each picture. |
| Length — Catalog Column | Which catalog column holds the length. Insert it as a variable, for example p->DURATION. Empty by default, which means no length is shown. |
| Length — Corner | Bottom right (the default), Bottom left, Top right or Top left. |
| Length — Badge Style | The badge’s background, colour and size. |
What your catalog needs
- Video Title, Video Link and Video Picture, under Catalog Fields. The link can be the video’s page on your site or the video on YouTube.
- For the length, a column that holds it. Whole seconds (
315) and the ISO 8601 form YouTube uses (PT5M15S) both show as 5:15, and an hour or more shows as 1:02:10. Any other text, such as4:12or12 min, is shown as it is. An empty column or0shows no length.
See Setting the Product / Content Feed for how videos get into your content catalog.
Everything else
Every other setting works as it does in Content Recommendations — Slider, Row or List: the three layouts (Slider, Row that wraps and List), the style accents, the badges, How Many Recommendations and the message shown when there is nothing to recommend. Two settings change:
- Image Height (slider) is auto by default, which keeps the picture 16:9 at any card width. A fixed height such as 150px crops the picture to that height.
- List — Picture Width sets how wide the picture beside each title is in the list, and in the row that wraps on a phone. It is 144px by default, and the height follows at 16:9.
Show Views, under Social Proof Text, counts the people who opened the video’s page on your site.
Tips
- A catalog of articles only is better shown with Content Recommendations — Slider, Row or List.
- Check the length on the live page. The editor’s sample cards always show lengths, even before you name a column.
- Use the per-algorithm titles. When the widget has fallbacks, each algorithm can carry its own heading in place of Watch next.
Related
- Content Recommendations — Slider, Row or List — the article design this one is built on.
- Content Recommendations Wizard — choosing which videos the widget recommends.
- Setting the Product / Content Feed — how videos get into Personyze.
- JSON API — Content Recommendations — the Video List feed, for drawing videos with your own code.
- Template Gallery — every ready-made design.