EditorJS Video Plugin

A customizable video block plugin for Editor.js that supports YouTube, Vimeo, and other video platforms.

Features

• 🎥 Built-in support for YouTube and Vimeo
• 🔌 Extensible platform support - add your own video platforms
• 📋 URL paste handling
• 🔄 Real-time preview
• ⚙️ Customizable embed options:
  • Fullscreen control
  • Clipboard access
  • Gyroscope functionality
• 📱 Responsive design
• 🔒 Sanitization support
• 📖 Read-only mode support

Installation

NPM

npm install @hannal/editorjs-video-plugin

Browser

You can include the plugin directly in your HTML file:

<!-- Include Editor.js -->
<script src="https://cdn.jsdelivr.net/npm/@hannal/editorjs@latest"></script>

<!-- Include the Video Plugin -->
<script src="https://cdn.jsdelivr.net/npm/@hannal/editorjs-video-plugin@latest/dist/video-plugin.umd.js"></script>

<script>
  const editor = new EditorJS({
    tools: {
      video: {
        class: VideoPlugin.Video,
        config: {
          // Optional platform configurations
        }
      }
    }
  });
</script>

ES Module

You can also use it as an ES module:

<script type="module">
  import EditorJS from '@hannal/editorjs';
  import { Video } from '@hannal/editorjs-video-plugin';

  const editor = new EditorJS({
    tools: {
      video: {
        class: Video,
        config: {
          // Optional platform configurations
        }
      }
    }
  });
</script>

Or in your JavaScript files:

import EditorJS from '@hannal/editorjs';
import { Video, videoParser } from '@hannal/editorjs-video-plugin';

const editor = new EditorJS({
  tools: {
    video: Video
  }
});

Usage

Add the Video tool to your Editor.js configuration:

import { Video, videoParser } from '@hannal/editorjs-video-plugin';

const editor = new EditorJS({
  tools: {
    video: {
      class: Video,
      config: {
        // Optional platform configurations
      }
    }
  }
});

Basic Example

const editor = new EditorJS({
  tools: {
    video: Video
  }
});

Data Format

The tool saves data in the following format:

{
  url: 'https://www.youtube.com/watch?v=example',
  videoId: 'example',
  provider: 'youtube',
  fullscreen: true,
  clipboard: true,
  gyroscope: true
}

Adding Custom Video Platforms

You can add support for additional video platforms by providing a platforms configuration:

const editor = new EditorJS({
  tools: {
    video: {
      class: Video,
      config: {
        platforms: {
          dailymotion: {
            regex: /^.+dailymotion.com\/(?:video|embed)\/([^/?]+)/,
            embedUrl: (videoId) => `https://www.dailymotion.com/embed/video/${videoId}`,
            validate: (match) => match && match[1],
            getId: (match) => match[1]
          }
        }
      }
    }
  }
});

Platform Configuration Options

Each platform configuration requires:

| Property | Type | Description | |----------|------|-------------| | regex | RegExp | Regular expression to match the video URL | | embedUrl | Function | Function that returns the embed URL for a video ID | | validate | Function | Function that validates the regex match | | getId | Function | Function that extracts the video ID from the regex match |

Example: Adding Dailymotion Support

const dailymotionConfig = {
  dailymotion: {
    // Matches URLs like: https://www.dailymotion.com/video/x7tgd2g
    regex: /^.+dailymotion.com\/(?:video|embed)\/([^/?]+)/,
    embedUrl: (videoId) => `https://www.dailymotion.com/embed/video/${videoId}`,
    validate: (match) => match && match[1],
    getId: (match) => match[1]
  }
}

HTML Rendering

To render the saved data as HTML, use the provided parser:

import { videoParser } from '@hannal/editorjs-video-plugin';

const html = videoParser.video(blockData);

Configuration Options

The video block supports the following embed options:

| Option | Type | Default | Description | |--------|------|---------|-------------| | fullscreen | boolean | true | Allows fullscreen mode | | clipboard | boolean | true | Enables clipboard access | | gyroscope | boolean | true | Enables gyroscope functionality |

Development

1. Clone the repository
2. Install dependencies: npm install
3. Build the package: npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Author

Hannal ([email protected])