Video
Usage
Presentation
This section explains how the ShVideo constructor is displayed, enabling the embedding of videos with custom styles.
Example Basic
This is how it is constructed:
::ShVideo
---
src: "https://www.youtube.com/watch?v=8A5AMiskxvQ"
---
::
Props
These are the properties and attributes associated with the ShVideo constructor:
Properties and Attributes Description
The ShVideo constructor creates a display format for embedding a video with customizable styles. Below is a detailed description of the properties and attributes used in the ShVideo constructor.
| Property | Attribute | Default | Description |
|---|---|---|---|
ui |
n/a | n/a | The ui property in the ShVideo constructor is a configuration object that allows for the customization of various styling aspects of the video component. Below is a detailed description of each attribute within the ui property: |
wrapper |
config.wrapper |
Defines the overall styling for the container that holds the video. | |
src |
n/a | n/a | The source URL of the video to be embedded. This property is mandatory. |
description |
n/a | n/a | Intented to be used as a help to content writter. Doesn`t render on website. |
Example Usage
Advanced Settings
An example with customized ui attributes for enhanced display:
This is an example with customized ui attributes for enhanced display:
::ShVideo
---
ui:
wrapper: "shadow-2xl mx-auto max-w-screen-lg" # custom styles for the wrapper
src: "https://www.youtube.com/watch?v=8A5AMiskxvQ"
---
::
Config
These style properties can be modified via ui and are stored in the ShVideo.ts file:
export default {
wrapper: "mx-5 ring-4",
// Default Tailwind CSS values
default: {
}
}
Class Descriptions
These represent the class values utilized in the ShVideo constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.
wrapper
- Value:
"mx-5 ring-4" - Description: This defines the overall styling for the video container. The value "mx-5 ring-4" indicates a horizontal margin of 5 units (mx-5) and a ring (border) of 4 units.
default
- Value:
{} - Description: This object is intended to hold any default Tailwind CSS values that might be used as fallback or initial styles.
These style properties ensure that the ShVideo component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.