MP4 Video Card
Video ModalThe card text area has a heading, optional styled span, text and an optional link.
hemeKit
ThemeKit Video
Video Cards
Video Cards
Using a two column grid to display a video with info allows the use of a smaller video file size which means faster page download in the browser.
The relative column widths can be adjusted and the layout switched. Below the breakpoint the text appears below the video..
Text Area
The text area can be vertically aligned at the top or center as shown above and has controls for padding and grid gap/.
Link
The optional link can be configured to open an internal or external page.
The tooltip appears on hover to indicate the link destination. It appears on tap on mobile devices and is hidden by tapping anywhere off the link.
Vimeo Card
Vimeo
Search GridIf the video aspect ratio is not 9:16 enter the file width and height into the widget settings.
This example shows the layout switch with relatibe column widths of 3:2.
YouTube Card
YouTube Video
GalleryNote the border with radius and bottom box shadow to "lift" the card off the canvas.
The irame videos require padding when the border radius is added.
In this case the text area is aligned at the top rather than the center
Menu