YouTube

Version Downloads

This extension adds a new youtube embed node to the editor.

Installation

npm install @tiptap/extension-youtube

Settings

inline

Controls if the node should be handled inline or as a block.

Default: false

Youtube.configure({
  inline: false,
})

width

Controls the default width of added videos

Default: 640

Youtube.configure({
  width: 480,
})

height

Controls the default height of added videos

Default: 480

Youtube.configure({
  height: 320,
})

controls

Enables or disables YouTube video controls

Default: true

Youtube.configure({
  controls: false,
})

nocookie

Enables the nocookie mode for YouTube embeds

Default: false

Youtube.configure({
  nocookie: true,
})

allowFullscreen

Allows the iframe to be played in fullscreen

Default: true

Youtube.configure({
  allowFullscreen: false,
})

Commands

setYoutubeVideo(options)

Inserts a YouTube iframe embed at the current position

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

Options

Option Description Optional
src The url of the youtube video. Can be a YouTube or YouTube Music link
width The embed width (overrides the default option, optional
height The embed height (overrides the default option, optional

Source code

packages/extension-youtube/

Usage