Skip to content
Masthead Tag

Embedded Video in Masthead

On this page, you will see examples of how we can use videos in our components. We can embed videos from various platforms such as Youtube, Wistia, and Vimeo. Additionally, in some cases, we can upload small mp4 videos directly to WordPress.

In the masthead example, we only support Wistia video embed with optional settings:

  • Autoplay video on page load
  • Show play button on load
  • Loop or play once
Button #1 Button #2

section title

subhead

  •

    Z-pattern component

    Video on the right side above the fold

    If we want to place a video above the fold with play button that will open a video in a modal, we use a z-pattern component. When nothing is entered in the masthead, this element of the page will be skipped, and the first component encountered will act like a masthead. Please remember to manually add an H1 tag, as this tag is auto-added in the masthead. The only visual difference is that the top navigation will always be on a white background if we go directly to components and skip the masthead.

    You can add optional pulse animation to video overlay button.

    Row CTA in this component

section title

subhead

  •

    Z-pattern component

    Vimeo Video on the right side

    we need a thumbnail image

2/3 or 50/50 split component

Vimeo embed

your text here

  • Clio Grow Client Intake Workflow Builder

    Z-pattern component

    Video (Animated GIF) on the right side above the fold

    GIFs can slow down the performance of the web pages, so make sure it’s optimized and compressed as much as possible.

    For GIFs, WCAG guidelines suggest setting animated GIF images to stop blinking after a certain number of times, within 5 seconds.

Simple text with default narrow width

What video platforms we use in Clio

Youtube – Reisman winners, Customer stories, ClioCon promos, Podcasts, Partnership
Wistia – Learning videos, Product videos
Vimeo – Webinar videos

Z Pattern

Z Patterns display any combination of a title, text, testimonial, and CTA; next to an image or video. Z Patterns can be started with the image/video on the left or on the right. This is the best and most used component for the video (originally designed for image/video). Image poster is required. Video will be played in a popup.

  • Example of a YouTube video that plays in a popup

    Popup videos open your video in a modal that pops over the rest of the content.

    Video thumbnail/image is required. You can add optional pulse animation to video overlay button.

    CTA (Secondary)

  • Example of a Wistia Video that plays in a popup

    Video thumbnail/image is required. You can add optional pulse animation to video overlay button.

Flexible Column Layout

  • YouTube video embed

    Example of a YouTube video directly embedded on a page (without a popup) with an option in the control panel to play it in full screen. Please note that in this component, the content will be top-aligned.

Flexible Column Layout

  • We can add a text to look like a Captions

  • Example of a Wistia video directly embedded on a page (without a popup) with an option in the control panel to play it in full screen. Thumbnail could be a still image or Video Thumbnail (see next below)

Simplified Product UI Clio Draft Build Client Trust Questionnaires Branding

Build client trust

Don’t ask your clients the same question more than once. Send professionally branded, multi-page questionnaires that they can fill from anywhere, on any device.

Book a Demo

Simple text full width

Simple Text component works the best if we want to use embedded video and display in full or narrow width of the component.

Full width Wistia Video example with Video Thumbnail
Watch Video

Simple text with muted video autoplay

Section CTA (Secondary - Video)

Simple text with default narrow width

Simple Text component works the best if we want to use embedded video and display in full or narrow width of the component.

Narrow width Wistia Video example with Video Thumbnail

Video embedded to a button

Video can be included in any CTA buttons as a popup. See example below. We can use this in any component. This Simple CTA component.

Watch Now

Product Spotlight

Example of animated gif in a Product Spotlight component (Image+Text)

  • Feature 1

    Feature description goes here. Clio is awesome!

    Learn More

  • Feature 2

    This feature also shows that links are optional.

  • Centralize your firm's data

    This feature also shows that you can customize the title and CTA.

    Case Management

  • Feature 4

    Feature description goes here. Clio is awesome!

Section CTA (Secondary)

Product Spotlight

Example of mp4 video + poster image in a Product Spotlight component

  • Feature 1

    Feature description goes here. Clio is awesome!

    Learn More

  • Feature 2

    This feature also shows that links are optional.

  • Centralize your firm's data

    This feature also shows that you can customize the title and CTA.

    Case Management

  • Feature 4

    Feature description goes here. Clio is awesome!

Section CTA (Secondary)

Product Spotlight

Example of mp4 video + poster image in a Product Spotlight component

Section CTA (Secondary)

Marketo Form component with left to right

STEP 1

Watch the video

This is an example of embedded wistia video with Video Thumbnail

Loading ...

Featured Testimonial(s) + Social Proof - Multiple

This component is extremely flexible. It will display a combination of testimonials, customer stories, logos, and statistics. You can display any number of these in almost any order and it will look great. You can see an example of video from Customer story - Youtube video open in popup.

We can ‘fake’ a video by using an image with build-in play button

A good way to reference a Clio resource on a different page - on demand webinars, master classes, product videos.

Video Popup

  • Example 1

    if we want the video to look like it’s autoplaying we can use a gif

    Watch Now
  • Product UI animation

    Example 2

    if we want the video to look like it’s autoplaying we can use a gif

    Watch Now

  • Product UI animation

    Example 3

    if we want the video to look like it’s autoplaying we can use a gif

    Watch Now

Tabber

Watch the video

This is an example of embedded wistia video with Animated thumbnail (on Wistia end – ask Andrew B.)

Watch the video

This is an example of embedded wistia video with Static Thumbnail

Watch the video

This is an example of embedded wistia video with Autoplay and Loop

2/3 or 50/50 split component

Wistia Vertical embed

The Building Blocks of Legal AI

Module One

You’ve probably heard a lot of buzz about AI in the legal world—but is it something you really need to pay attention to? This introductory module with legal tech experts explains how AI is starting to change the way law firms work—and what it means for you.

Learning outcomes:

  • What AI is (in plain English) and how it affects your daily work
  • Why it could change hiring, policies, and delivery of legal services
  • How AI saves time and boosts productivity

Navattic Tour

Implemented via shortcode