Video

This is the Video extension. It allows you to embed videos into the editor with support for dimensions, alignment, and both URL and file upload options.

Default Usage

Default usage of the video extension with floating menu and external embed enabled.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlEmbedVideo :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlEmbedVideo,
    Video,
    Youtube,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: '<p>Click the video button to insert videos into the editor</p>',
    extensions: [Video, Youtube, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Without Floating Menu

Default usage of the video extension with floating menu and external embed enabled.

Vue

<template>
  <HLTextEditor :editor="editor1">
    <template #header>
      <RTEControlEmbedVideo :editor="editor1" :enableFloatingMenu="false" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlEmbedVideo,
    Video,
    Youtube,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor1 = new Editor({
    content: '<p>Video embedding with floating menu disabled</p>',
    extensions: [Video, Youtube, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Youtube Usage

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlEmbedVideo,
  Video,
  Youtube,
} from '@platform-ui/rte'

Commands

// Insert video with URL
editor?.chain().focus().setVideo({ src: 'https://example.com/video.mp4' }).run()

// Insert video with additional attributes
editor
  ?.chain()
  .focus()
  .setVideo({
    src: 'https://example.com/video.mp4',
    width: '640',
    height: '360',
  })
  .run()

// Insert video with YouTube URL
editor.commands
  .setYoutubeVideo({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' })
  .run()

// Insert video with additional attributes
editor.commands
  .setYoutubeVideo({
    src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
    width: '640',
    height: '360',
  })
  .run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
enableFloatingMenu	boolean	true	Enables the floating menu for the video control
enableExternalEmbed	boolean	true	Allows the user to upload a video from their local machine
externalEmbeddedVideo	string	null	The URL of the external video
modalContainer	string	null	The container to render the modal in
externalEmbedText	string	null	The text to display when the user triggers the external embed
fileLimitInBytes	number	undefined	Maximum file size limit for video uploads (in bytes)
tooltipLabel	string	Add Video	The label to display in the tooltip
tooltipPosition	Placement	'top'	The position of the tooltip
language	Language	'en-US'	The language for localization
ariaLabel	string	null	Accessibility label

Video Attributes

When inserting videos, you can specify the following attributes:

• src - Video URL (required)
• width - Video width in pixels
• height - Video height in pixels
• controls - Show video controls (boolean)
• autoplay - Auto-play video (boolean)
• loop - Loop video playback (boolean)
• muted - Mute video audio (boolean)

Events

Event	Payload	Description
triggerExternalEmbed	boolean	Emitted when external embed is triggered
onError	string	Emitted when an error occurs during embedding

Slots

Slot	Description	default
icon	The icon to display in the toolbar button	VideoRecorderIcon