The Display Block is used to control all the parameters of the SAM Preview as it appears on or the below the video.
A SAM will appear below the video when the video aspect ratio is equal to, or taller than it is wide or the width of a 16:9 video is less than 320 pixels.
If the Display Block is not already part of the SAM Preview, go to the “Convert to SmartBlocks” pane and make sure it is active. From there, click the “Add Blocks” button and select “Display Block”.
The image used in the preview thumbnail is added at the top of the edit SAM overlay page along with:
- Preview Text: The text that will appear on the label when the SAM preview is shown on or below the video. Keep this as concise as possible. Longer text fields will create multiple lines depending on the video display size and the label settings as documented below.
- Display Image: This is the image that will be used as part of the overlay preview. Always use an image with a 1:1 aspect ratio and keep the image size small. Ex: 300x300 and as lightweight as possible to enable fast loading when the SAM is displayed.
SAM Display Settings
Block Preview
Block Preview displays the block as it will appear in the SAM and will update as changes are made to any of the settings.
Code
Code displays how the JSON is written as an additional view for programmers.
(X)
Deletes the block from the SAM.
Enable Block
Removes the Block from the SAM but keeps it available for use at a later time or imported into another SAM.
Preview Display Settings
Icon Size
A slider ranging from 20 to 120 pixels in size for the thumbnail image used.
Show Label
Option to remove the label from the overlay and just use the image.
Label Settings
Text Color Change the color of the text in the label with the color selector or copy/paste a HEX or RGB value.
Fonts 11 cross browser web-safe fonts are available for the label. This font selection also affects the font used when displayed below the video.
Style Bold, italics, and underline are styles available for the label.
Font Size A slider allowing sizes 1-100 available. Anything below 10 and above 30 are very special cases and sizes outside 10-30 will not display well in most video displays.
Opacity A slider from 0.0 (fully transparent) to 1.0 (fully opaque) is available for the text.
Label Background These settings affect the label that sits on the video. There is a separate control for the display below the video.
Background Color Change the color of the label background via the color selector or copy/paste a HEX or RGB value.
Opacity A slider from 0.0 (fully transparent) to 1.0 (fully opaque) is available for the label. This does not affect the label below the video.
Show Countdown
Checkbox adds a counterclockwise countdown ring where the duration is defined by the span that was curated in the video timeline in which it was used.
Show as Banner Portrait Mode
Instead of the default SAM preview below the video, this can be replaced by an image of your choosing. it can be any size or aspect ratio, but test to see which one works best for the publishing environment being used. When checked, a new pane called “Banner Settings” appears.
Banner Settings
Image URL: Enter a URL or select from the Assets library. Border Radius: Round the corners of the uploaded image. Banner Animation: The image can attract some attention by adding some animation to it as it displays below the video:
- Flash
- Pulse
- Rubber Band
- Tada
- None
Under the Video
If the Banner Ad is not used, this next section allows control over the default view of the SAM when it falls below the video.
Position under the video: The thumbnail and text can be positioned left, right or center. When left, the thumbnail is to the left of the text, when right, the thumbnail is to the right of the text. Background Color Under Video: Similar to the label settings, the background color can be set via a color picker or copy/pasting a HEX or RGB color value into the field. Label Text Color Under Video: Similar to the label text settings, the background color can be set via a color picker or copy/pasting a HEX or RGB color value into the field. Show Separator Under Video: Allow for a vertical bar to be inserted between the thumbnail image and the text. Its color can be changed in the same way the label and text color can be changed.
Animation
Animation affects the thumbnail preview and label when displayed on the video. It affects the Preview in four different ways:
- Icon Animation: Animates the image portion of the SAM.
- Label Animation: Animates the label portion of the SAM
- Enter Animation: Animates the entrance of a SAM when it first displays on the video.
- Exit Animation: Animates the exit of a SAM when it leaves the video.
Padding
Changes the size of the label/canvas of the SAM when it falls below the video.
Enable Click to Dial
When this switch is active, the SAM overlay when tapped instructs the device to dial the phone number applied. It is the only function available when this is active. When this is active, the only fields available are Image, Icon Size, and Label. When active, the SAM cannot open to its details as dialing is the only function of this SAM option.
Enable Click Out
When this switch is active, the SAM overlay when tapped will open a page or other function as defined by the URL. It is the only function available when this is active. When a URL is provided, a UTM and up to five third-party tracking pixels can be applied.