Video Embedded
Overview
The VVideoEmbedded component is designed to embed videos from various services such as YouTube and Vimeo. It automatically selects the appropriate player based on the provided video URL. Location - ui-kit/src/components/VVideoEmbedded/VVideoEmbedded.vue
Features
- Dynamic Video Source: Supports embedding videos from YouTube and Vimeo.
- Auto Play: Option to automatically play the video when active.
- Error Handling: Handles errors related to video playback.
Importing the Component
To use the VVideoEmbedded component, import it as follows:
import VVideoEmbedded from 'UiKit/components/VVideoEmbedded/VVideoEmbedded.vue';Component Props
The component accepts the following props:
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
url | String | undefined | Yes | The URL of the video to be embedded. |
active | Boolean | false | No | Indicates if the video is currently active. |
autoPlay | Boolean | false | No | Automatically play the video when active. |
Full Example
<script setup lang="ts">
import VVideoEmbedded from 'UiKit/components/VVideoEmbedded/VVideoEmbedded.vue';
const videoUrl = 'https://www.youtube.com/watch?v=mUxzKVrSAjs';
</script>
<template>
<VVideoEmbedded :url="videoUrl" active />
</template>VVideoEmbeddedVimeo
The VVideoEmbeddedVimeo component is designed to embed Vimeo videos. It provides methods to control playback and emits events when the video is ready. Location - ui-kit/src/components/VVideoEmbedded/VVideoEmbeddedVimeo.vue
Features
- Vimeo Integration: Specifically designed for embedding Vimeo videos.
- Playback Control: Methods to play, pause, and mute the video.
- Ready Event: Emits an event when the video is ready for playback.
Importing the Component
To use the VVideoEmbeddedVimeo component, import it as follows:
import VVideoEmbeddedVimeo from 'UiKit/components/VVideoEmbedded/VVideoEmbeddedVimeo.vue';Component Props
The component accepts the following props:
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
id | String or Number | undefined | Yes | The ID of the Vimeo video to be embedded. |
VVideoEmbeddedYoutube
The VVideoEmbeddedYoutube component is designed to embed YouTube videos. It provides methods to control playback and emits events when the video is ready. Location - ui-kit/src/components/VVideoEmbedded/VVideoEmbeddedYoutube.vue
Features
- YouTube Integration: Specifically designed for embedding YouTube videos.
- Playback Control: Methods to play, pause, and mute the video.
- Ready Event: Emits an event when the video is ready for playback.
Importing the Component
To use the VVideoEmbeddedYoutube component, import it as follows:
import VVideoEmbeddedYoutube from 'UiKit/components/VVideoEmbedded/VVideoEmbeddedYoutube.vue';Component Props
The component accepts the following props:
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
id | String or Number | undefined | Yes | The ID of the YouTube video to be embedded. |
VVideoThumb
The VVideoThumb component displays a thumbnail image for a video. It automatically fetches the thumbnail based on the provided video URL and supports fallback images. Location - ui-kit/src/components/VVideoEmbedded/VVideoThumb.vue
Features
- Dynamic Thumbnail: Automatically fetches the thumbnail image based on the video service.
- Fallback Support: Provides a fallback mechanism if the thumbnail cannot be loaded.
- Customizable Fit: Allows customization of the image fit (cover, contain, inherit).
Importing the Component
To use the VVideoThumb component, import it as follows:
import VVideoThumb from 'UiKit/components/VVideoEmbedded/VVideoThumb.vue';Component Props
The component accepts the following props:
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
url | String | undefined | Yes | The URL of the video to fetch the thumbnail from. |
fit | String | cover | No | The fit style for the thumbnail image. |
Default Slot
The VVideoThumb component supports a default slot for custom play icons.