Video
Updated over a week ago

Overview

The Video component allows for uploaded videos to be lazy loaded. The Video component is the preferable way of using videos in Shogun Frontend.

Import

The Video component can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.

import Video from "frontend-ui/Video"

Usage

The usage of the Video component is virtually the same as using the video HTML element:

import React from 'react'
import Video from "frontend-ui/Video"

const MyComponent = () => (
<Video
poster="https://f.shgcdn.com/7e53bfca-8e38-4e56-8650-e1d7001544b8/"
autoPlay
>
<source src="https://f.shgcdn.com/147c79f5-1b1a-4428-8b0e-7079cde26003/" />
</Video>
)

export default MyComponent

Props

The Video components accepts all props (and parameters) that a video HTML element supports, with one slight modification:

name

type

default value

description

loading

lazy | eager | lazy-video

lazy

lazy: Lazy loads all (src/source and poster).
โ€‹eager: Downloads all resources.
โ€‹lazy-video: Only lazy loads src/source, but not poster.

Did this answer your question?