Studio Site - Tile: Video | Studio Site Reference Guide

Page Content

How to Add a Studio Site - Tile: Video

Use the Studio Site—Tile: Video content type to add a single, double, or triple-width tile containing an image and an embedded video. This is the preferred way to embed a video onto a webpage.

Learning objectives

Understand the purpose of the Studio Site - Tile: Video content type
Learn how to use the Studio Site - Tile: Video content type to display engaging videos

How to use the Studio Site - Tile: Video content type

From the T4 Site Structure, navigate to the page you are updating.

You will need to resize an image to overlay the video tile: 512x512 (required on all tiles) and 1440x480 (for double or triple width video tiles)
After resizing the images, upload them to the T4 Media Library.
Navigate to the Studio Site page in the T4 Site Structure.
Click "Add content"
Select the "Studio Site - Tile: Video" content type.
Use the following content elements:
- Name: Add descriptive name of content type to be used within T4 Site Structure.
- Type of tile:
  - Full bleed: Stretches the tile to touch the surrounding content (or the edge of the page).
  - Not full bleed (w/ margin): Adds a white space margin between the edge of the tile and the surrounding content (or the edge of the page).
  - Not full bleed w/ slider (w/ margin): Not recommended for use with video tiles. When selected, adds a left and right arrow on the sides of the page to scroll through all of the tile content that has this option selected.
- Slider Autoplay: Not recommended for use with video tiles. When selected, the page automatically scrolls through a minimum of four tiles at timed intervals.
- Width of tile:
  - Double Width: 1024x512 rectangular tile
  - Round (Tile: Picture only): Not compatible with video tiles
  - Square: 512x512 square tile
  - Triple Width: 1440x480 rectangular tile
- Image: The image doesn't need to be resized because this content type uses the CDN PXL, but you do need to select the same image from the T4 Media Library in both the "smallest image" and "bigger image" fields.
  - Smallest image: Select an image from the Media Library (required).
  - Biggest image: Select the same image from the Media Library (required).
- White border on image: Check to add a white border to the image tile.
- Sub Heading: Optional, adds small text to the tile (over the image).
- Heading: Optional, adds large text to the tile (over the image).
- Open link in new tab: Select to have the link open in a new tab.
- Video Embed: Paste video embed code for the video. Learn more about modifying the embed code.
Click the blue "Save changes" button to save content as a draft, or press the arrow and select "Save and approve" to save and publish updates.

Best practices

Select the triple-width option to display a full-width video on the page
Choose videos that are concise and directly support the purpose of the page to keep users interested
Use clear, high-quality thumbnails to encourage users to click and engage with the video content
Add closed captions or transcripts for those with hearing impairments, and provide descriptive alt text for thumbnails to assist screen readers
Test videos before publishing to prevent playback issues and ensure a seamless user experience