YouTube Video Plugin

The YouTube Video Plugin provides seamless YouTube video embedding capabilities for the on-CodeMerge editor, allowing users to insert and manage YouTube videos with interactive features.

Features

YouTube Video Embedding: Insert YouTube videos by URL or video ID
Interactive Resizing: Resize embedded videos with handles
Context Menu: Right-click for quick video operations
URL Parsing: Automatic extraction of video ID from various YouTube URL formats
Responsive Design: Automatic responsive behavior
Fullscreen Support: Enable fullscreen video playback
Toolbar Integration: Easy access via toolbar button
Multiple URL Formats: Support for various YouTube URL formats

Install and CSS: see Editor API — Getting Started.

Basic Usage

javascript

import { Editor, YouTubeVideoPlugin } from 'on-codemerge';

const editor = new Editor(container, {
  plugins: [YouTubeVideoPlugin()],
});

Demo

Public API (v2)

Factory: YouTubeVideoPlugin().

Command
`insertYouTube`	`editor.command('insertYouTube')`

Keyboard shortcuts

Shortcut	Command
`Mod-Alt-y`	`insertYouTube`

Note: Command insertYouTube (not insertYouTubeVideo).

Supported YouTube URL Formats

The plugin supports various YouTube URL formats:

Standard URLs

https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://www.youtube.com/embed/VIDEO_ID

Short URLs

https://youtu.be/VIDEO_ID
https://y2u.be/VIDEO_ID

Mobile URLs

https://m.youtube.com/watch?v=VIDEO_ID

Playlist URLs

https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID

Live Stream URLs

https://www.youtube.com/watch?v=VIDEO_ID&live=1

Right-click on a YouTube video to access:

Video Operations

Edit Video: Open video editor
Copy Video URL: Copy YouTube URL to clipboard
Delete Video: Remove video from editor

Display Options

Video Size: Adjust video dimensions
Video Alignment: Left, center, or right alignment
Video Border: Add or remove borders

YouTube Video Structure

HTML Structure

html

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
  class="max-w-full rounded-lg p-2"
>
</iframe>

CSS Classes

.max-w-full - Maximum width 100%
.rounded-lg - Rounded corners
.p-2 - Padding

Examples

Basic YouTube Video

html

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
  class="max-w-full rounded-lg p-2"
>
</iframe>

Responsive YouTube Video

html

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
  class="max-w-full rounded-lg p-2"
  style="max-width: 100%; height: auto;"
>
</iframe>

YouTube Video with Custom Styling

html

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="600"
  height="300"
  frameborder="0"
  allowfullscreen
  class="max-w-full rounded-lg p-2"
  style="border: 2px solid #e5e7eb; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
>
</iframe>

Video ID Extraction

The plugin automatically extracts video IDs from various URL formats:

javascript

// Supported URL patterns
const urlPatterns = [
  'https://www.youtube.com/watch?v=VIDEO_ID',
  'https://youtu.be/VIDEO_ID',
  'https://www.youtube.com/embed/VIDEO_ID',
  'https://m.youtube.com/watch?v=VIDEO_ID',
  'https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID',
];

// Video ID extraction regex
const regex =
  /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;

Integration Examples

React Integration

jsx

import React, { useEffect, useRef } from 'react';
import { Editor, YouTubeVideoPlugin } from 'on-codemerge';

function MyEditor() {
  const editorRef = useRef(null);
  const editorInstance = useRef(null);

  useEffect(() => {
    if (editorRef.current && !editorInstance.current) {
      editorInstance.current = new Editor(editorRef.current);
      editorInstance.current.use(YouTubeVideoPlugin());
    }

    return () => {
      if (editorInstance.current) {
        editorInstance.current.destroy();
      }
    };
  }, []);

  return <div ref={editorRef} className="editor-container" />;
}

Vue Integration

vue

<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>

<script>
import { Editor, YouTubeVideoPlugin } from 'on-codemerge';

export default {
  name: 'MyEditor',
  mounted() {
    this.editor = new Editor(this.$refs.editorContainer);
    this./* use plugins: [YouTubeVideoPlugin()] in Editor(...) */;
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  }
};
</script>

Styling

Default Styles

css

/* YouTube video styles */
.html-editor iframe[src*='youtube.com'] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.html-editor iframe[src*='youtube.com']:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive video container */
.youtube-video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Custom Themes

css

/* Dark theme */
.youtube-video.dark-theme {
  border-color: #374151;
  background-color: #1f2937;
}

/* Light theme */
.youtube-video.light-theme {
  border-color: #e5e7eb;
  background-color: #ffffff;
}

/* Custom video sizes */
.youtube-video.small {
  width: 400px;
  height: 225px;
}

.youtube-video.medium {
  width: 600px;
  height: 338px;
}

.youtube-video.large {
  width: 800px;
  height: 450px;
}

YouTube API Integration

For advanced features, you can integrate with the YouTube Data API:

javascript

// Get video information
async function getVideoInfo(videoId) {
  const response = await fetch(
    `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=YOUR_API_KEY&part=snippet,statistics`
  );
  const data = await response.json();
  return data.items[0];
}

// Example usage
const videoInfo = await getVideoInfo('dQw4w9WgXcQ');
console.log('Video title:', videoInfo.snippet.title);
console.log('View count:', videoInfo.statistics.viewCount);

Troubleshooting

Common Issues

Video not embedding
- Check if URL is valid YouTube URL
- Verify video ID extraction is working
- Check browser console for errors
Video not resizing
- Make sure video is clicked to activate
- Check for conflicting CSS styles
- Verify ResizableElement is properly initialized
Context menu not working
- Ensure iframe has proper event handlers
- Check for event handler conflicts
- Verify ContextMenu component is initialized
Video not responsive
- Check if responsive CSS is applied
- Verify iframe has proper classes
- Ensure container has responsive styles

Debug Mode

Enable debug logging:

javascript

// Add console logging
console.log('YouTube Video plugin initialized');

// Check video events
editor.on('youtube-video:inserted', (video) => {
  console.log('YouTube video inserted:', video);
});

// Check URL parsing
const videoId = extractYouTubeVideoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
console.log('Extracted video ID:', videoId);

Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Performance Considerations

Videos are loaded on-demand
Responsive design prevents layout shifts
Lazy loading can be implemented for multiple videos
Video thumbnails can improve loading performance

Privacy and Security

YouTube videos respect user privacy settings
No personal data is transmitted to YouTube
Videos are embedded using YouTube's official embed code
HTTPS is enforced for secure connections

Accessibility

Screen reader support for video descriptions
Keyboard navigation for video controls
High contrast themes available
Proper ARIA labels for video elements

License

MIT License - see LICENSE file for details.

YouTube Video Plugin ​

Features ​

Basic Usage ​

Demo ​

Public API (v2) ​

Keyboard shortcuts ​

Supported YouTube URL Formats ​

Standard URLs ​

Short URLs ​

Mobile URLs ​

Playlist URLs ​

Live Stream URLs ​

Context Menu ​

Video Operations ​

Display Options ​

YouTube Video Structure ​

HTML Structure ​

CSS Classes ​

Examples ​

Basic YouTube Video ​

Responsive YouTube Video ​

YouTube Video with Custom Styling ​

Video ID Extraction ​

Integration Examples ​

React Integration ​

Vue Integration ​

Styling ​

Default Styles ​

Custom Themes ​

YouTube API Integration ​

Troubleshooting ​

Common Issues ​

Debug Mode ​

Browser Support ​

Performance Considerations ​

Privacy and Security ​

Accessibility ​

License ​

YouTube Video Plugin

Features

Basic Usage

Demo

Public API (v2)

Keyboard shortcuts

Supported YouTube URL Formats

Standard URLs

Short URLs

Mobile URLs

Playlist URLs

Live Stream URLs

Context Menu

Video Operations

Display Options

YouTube Video Structure

HTML Structure

CSS Classes

Examples

Basic YouTube Video

Responsive YouTube Video

YouTube Video with Custom Styling

Video ID Extraction

Integration Examples

React Integration

Vue Integration

Styling

Default Styles

Custom Themes

YouTube API Integration

Troubleshooting

Common Issues

Debug Mode

Browser Support

Performance Considerations

Privacy and Security

Accessibility

License