Video

In this article, we're going to discuss the Video Element in the Pro Builders and Cornerstone. We're going to show you the two types of videos supported by this element and how to configure each.

  1. Video Embed Setup
  2. Video Player Setup
  3. Video Controls Setup
  4. Frame Settings
  5. Customize
  6. Demo
  7. Summary

To add the Video Element, simply search for "video" on the Elements search on your Cornerstone or any builder in Pro (Content, Header, Global Block, Footer) and drag the Video element on the content pane.

Video Element

Once you've added the element, you'll see this on the settings pane:

Video Element Setup

Under Setup, you'll see Embed and Player. Let's discuss Embed first.

Video Embed Setup

On the Embed setup, you'll see a field named Embed Code. Websites such as Youtube and Vimeo (just to name a few) allow you to display their videos to your website. So let's say you want to add this Video from Youtube on to your website, just click the Share button:

Video Embed

Then click the Embed button on the modal:

Video Embed Popup

Copy the Embed code:

Video Embed Code Copy

Then paste that code to the Video Element's Embed Code field:

Video Embed Code Placement

You'll then see that the video has been added along with the designs and controls found on Youtube also.

Video Embed Code Example Website

Note: Different websites have their own embed codes.

Video Player Setup

Now the second setup option is Player.

Video Player Setup

Basically, instead of using an embed code from a video hosting website, you'll have to enter the URL of the actual video file. If you host your video files, whether it's in your website or on a CDN provider, this is the option you will choose.

You simply have to enter the URL of the file (e.g. example.com/videos/my-video.mp4) on the Sources field.

Video Player Setup Source

Now you'll notice that inside the parenthesis of the Sources field, there's a text that says "1 Per Line." Let me explain that. Because there are so many devices and browsers that could be viewing your website, and would want to watch your video, it is recommended that you offer multiple file sources. Basically, a source is the same video file offered in a different file format. So if you have an MP4 file format, it is recommended that you put an OGG, MOV and WEBM version as well.

The purpose is that if a certain browser doesn't play one video format (e.g. MP4), you'll have a backup format which the browser may support.

Here's how you will implement it:

Video Player Setup Multiple Formats

Lastly, there's the Poster field.

Video Player Setup Poster Field

This is the image that will display before the video is played. This is optional.

Video Controls Setup

If you select the Player setup, an additional set of options are added that allows you to customize the video player controls. They are the following:

Controls Setup

There's a dropdown labeled Preload Content with three options:

Video Controls Setup
  • None - Requests the browser not preload the video file.
  • Auto - Requests that the browser download the video file's metadata immediately on page load.
  • Metadata - Requests the browser to download the entire video file, regardless of whether the user is going to play it or not.

Note: There's no 100% guarantee that the browser will follow this. Some browsers ignore this option. You'll also see the

Display & Function option with five checkboxes:

Video Control Colors
  • No Controls - If you check this option, the entire control bar will not be displayed. Users can still play and pause the video by clicking on the video itself. ** **
  • Advanced - If checked, the time, volume and full-screen controls will be displayed.
  • Autoplay - When checked, the video file will play automatically once the page is loaded.
  • Loop - If checked, the video file will replay after it is finished.
  • Muted - If checked, the video will play but there will be no sound.

Controls Colors

The controls colors control group gives you the ability to fine tune the color of various parts of the video control:

  • Buttons - Use this option to set the color of the play/paus button in the normal and hover mode.
  • Time Progress - Use this option to set the total progress bar color and the loaded portion.
  • Time Current - Use this option to set the elapsed time marker color in the progress bar.
  • Text - Use this option to set the text color of the control.
  • Background - use this option to set the background color of the control.
Video Control Colors

Controls Margin

Use this option to set the margin of the control. You can change the settings for all the sides of the control or modify them individually.

Video Controls Margin

Controls Padding

Use this option to set the padding of the control. You can change the settings for all the sides of the control or modify them individually.

Video Controls Padding

Controls Border

Use this option to set the border of the control. You can set the style, width and color of the border on all sides or each side individually.

Video Controls Border

Controls Border Radius

Use this option to set a border radius for the control. You can set the curve on all sides or set them individually.

Video Border Radius

Controls Box Shadow

You can set a shadow over the control using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the control.
  • Y-Offset - Use this option to set the Y offset of the shadow in the control.
  • Blur - Use this option to set the intensity of the blur effect in the control.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the control.
  • Color - Use this option to set the color of the control shadow.
Video Box Shadow

Time Rail Border Radius

Use this option to set a border radius for the time rail. You can set the curve on all sides or set them individually.

Video Border Radius

Time Rail Box Shadow

You can set a shadow over the time rail using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the time rail.
  • Y-Offset - Use this option to set the Y offset of the shadow in the time rail.
  • Blur - Use this option to set the intensity of the blur effect in the time rail.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the time rail.
  • Color - Use this option to set the color of the time rail shadow.
Video Time Rail Box

Frame Settings

Not only can you configure how the player controls will look like, you can also configure how the video's frame looks like. Regardless of whether you chose an Embed or Player Video Type, you may configure the Frame's settings. To do that, click on the Frame tab.

Video Frame Tab

Setup

Video Setup
  • Content Sizing- You can choose either Aspect Ratio or Fixed Height. If you choose Aspect Ratio, you can enter the ratio of the video's frame's width and height with respect to each other. If you choose Fixed Height, as the name suggests, the height of the frame is going to be "fixed." The width will be set by whatever value you enter on the Width & Max Width field.
  • Width & Max Width - Width is going to be the actual width of the frame and max width is its limit.
  • Background Color - Sometimes the video doesn't cover the entire frame such as if you add frame padding. You may choose to set a background color so that the background is not white.
Video Frame Background

Frame Margin

Use this option to set the margin of the frame. You can change the settings for all the sides of the frame or modify them individually.

Video Frame Box Shadow

Frame Padding

Use this option to set the padding of the frame. You can change the settings for all the sides of the frame or modify them individually.

Video Frame Box Shadow

Frame Border

Use this option to set the border of the frame. You can set the style, width and color of the border on all sides or each side individually.

Video Frame Box Shadow

Frame Border Radius

Use this option to set a border radius for the frame. You can set the curve on all sides or set them individually.

Video Frame Box Shadow

Frame Box Shadow

You can set a shadow over the frame using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the frame.
  • Y-Offset - Use this option to set the Y offset of the shadow in the frame.
  • Blur - Use this option to set the intensity of the blur effect in the frame.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the frame.
  • Color - Use this option to set the color of the frame shadow.
Video Frame Box Shadow

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Video Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Video Element click here.

Summary

In this article, you learned how to add videos in Cornerstone or Pro Content builder. You learned the two video types namely "Embedded" and "Player." Lastly, you learned how to configure each type, giving you flexibility to set up your videos.

See something inaccurate? Let us know