YouTube

The Youtube extension adds a YouTube button to the toolbar. Clicking it opens a dropdown where users can paste a video URL and set the width, height, controls, autoplay and loop for that video. Select an embedded video and open the dropdown again to update it.

Import

import { Youtube } from 'ritext/extension/youtube';

Usage

const extensions = [Youtube];

Configuration

Width, height, controls, autoplay and loop set the defaults shown in the dropdown. All other player options are configured in code.

Youtube.configure({
  width: 640,
  height: 360,
  controls: true,
  nocookie: true,
  modestBranding: true,
  ccLanguage: 'en',
  progressBarColor: 'white',
})

Alignment

Videos can be aligned left, center or right from the YouTube dropdown. If the Text Align extension is installed, its toolbar button also aligns a selected video. Click the space above or below the video to select it.

Commands

editor.commands.setYoutubeVideo({
  src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
  width: 640,
  height: 480,
})

editor.commands.setTextAlign('center') // with a video selected

Options