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 thetop
orleft
values are provided, the correspondingbottom
orright
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>