YouTube

Type: Node · Category: Rich Content

YouTube embeds an interactive, responsive video player directly in the document. Users can watch videos seamlessly without leaving the editor.

Installation

import { Youtube } from "@arkpad/extension-youtube";

Commands

The extension registers a dedicated command for embedding videos:

// Inserts a responsive YouTube player at the current selection
editor.runCommand("setYoutubeVideo", {
  src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
  width: "100%", // default: "100%"
  height: "480", // default: "480"
});

Chaining Commands

You can chain commands to set a video and focus the editor:

editor.chain().focus().setYoutubeVideo({ src: "https://youtu.be/dQw4w9WgXcQ" }).run();

Smart Paste (Auto-Embed URL)

The YouTube extension includes a built-in smart ProseMirror paste handler.

If you copy any valid YouTube URL (e.g. from youtube.com/watch, youtu.be, or youtube.com/embed) and simply paste it directly into the editor, the engine will automatically parse the link and convert it into an active embedded video player instantly!

Attributes

Name	Type	Default	Description
`src`	`string`	`null`	The URL source or watch link of the YouTube video (required).
`width`	`string`	`"100%"`	Player width style parameter.
`height`	`string`	`"480"`	Player height style parameter.

Active State

const isActive = editor.isActive("youtube");

Configuration

Options

Name	Type	Default	Description
`width`	`string`	`"100%"`	Default player width.
`height`	`string`	`"480"`	Default player height.
`HTMLAttributes`	`Record<string, any>`	`{}`	Key-value pairs of custom attributes to render on the inner `<iframe>` tag.

Youtube.configure({
  width: "80%",
  height: "360",
  HTMLAttributes: {
    class: "custom-youtube-player",
  },
});

Advanced Interactive UX

Arkpad's YouTube extension includes a fully custom, touch-enabled interactive node view that displays rich scaling and alignment controls on selection:

Interactive Resizing

Pointer-Event Overlay: Features a custom transparent overlay directly above the video player. This prevents the YouTube player from swallowing mouse/touch events, allowing seamless clicking, focusing, and drag-resizing inside the editor.
16:9 Aspect Ratio Lock: Automatically preserves the standard responsive 16:9 horizontal aspect ratio during resizing (padding-bottom 56.25%), preventing any ugly black letterboxing.
Symmetric Centered Scaling: When the video is center-aligned, resizing coordinates scale symmetrically from both left and right directions.
Real-time Percentage Tooltip: Shows the current percentage width (e.g. 70%) in a dark floating tooltip overlay as you drag.
Mobile Touch Support: Binds touch gestures (touchstart/touchmove/touchend) for smooth resizing on phone and tablet screens.

A floating popover toolbar appears centered directly above the selected video block for quick attribute manipulation:

Alignment Controls: Quick left, center, and right alignments.
Instant Deletion: Single-click deletion with a red-accented trash button.