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.

Embedded Video Example​
<video-embed class="lora-embedded-video loaded" 
   video-id="ec1632ca-97be-4fec-b167-e34512abb21a" enable-fullscreen="false">
</video-embed>
Playlist Example: Story Block​
<story-block-playlist 
   playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b" 
   video-height="480" enable-fullscreen="false"
>
</story-block-playlist>

The UI for carousel and grid playlists does not change when enable-fullscreen is set to false; however, users are prevented from accessing fullscreen mode by clicking the video.

<grid-playlist 
   playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b" 
   video-height="480" enable-fullscreen="false"
>
</grid-playlist>

<carousel-playlist 
   playlist-id="00dcfcd5-41f1-405b-c748-08dbb98a1f8b" 
   video-height="480" enable-fullscreen="false"
>
</carousel-playlist>

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>