Skip to main content

Short Video Custom Code

This section focuses on embedding short videos and configuring custom behaviors using the available properties.

Properties

1. video-id (Required)

  • Description: The unique identifier for the video you want to embed.
  • Type: String
  • Example:
video-id="ec1632ca-97be-4fec-b167-e34512abb21a"

2. enable-fullscreen (Optional)

  • Description: Controls whether the fullscreen mode is displayed on the video player.
  • Type: Boolean
  • Default: true
enable-fullscreen="false"

Example

Disabling Fullscreen: To disable the fullscreen functionality on the embedded video player, you can use the enable-fullscreen property. Setting this property to false will hide the fullscreen button, preventing users from entering fullscreen mode.

<video-embed class="lora-embedded-video loaded" 
video-id="ec1632ca-97be-4fec-b167-e34512abb21a" enable-fullscreen="false">
</video-embed>

3. pip-style (Optional)

  • Description: Defines the style of the Picture-in-Picture (PIP) container on the screen. This attribute accepts a semicolon-separated list of CSS styles. Supported keys include top, left, bottom, right and any valid CSS properties. If the top or left values are provided, the corresponding bottom or right defaults will not be applied.
  • Type: String
  • Default: bottom:0px; right:15px;
info

The pip-style property enables full customization of the PIP container's style. You can specify position, size, color, or any other CSS properties. If not set, it defaults to the bottom-right corner.

Examples

<!-- SINGLE VIDEO -->
<video-embed class="lora-embedded-video loaded"
video-id="ec1632ca-97be-4fec-b167-e34512abb21a" pip-style="top:50px; left:30px;">
</video-embed>

<!-- CAROUSEL -->
<carousel-playlist
playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b"
pip-style="top:50px; left:30px;"
></carousel-playlist>

<!-- GRID -->
<grid-playlist
playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b"
pip-style="top:50px; left:30px;"
></grid-playlist>

<!-- STORY BLOCK -->
<story-block-playlist
playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b"
pip-style="top:150px; left:90px;"
></story-block-playlist>