Youtube extension

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

Install

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,
})

autoplay

Allows the iframe to start playing after the player is loaded

Default: false

Youtube.configure({
  autoplay: true,
})

ccLanguage

Specifies the default language that the player will use to display closed captions. Set the parameter’s value to an ISO 639-1 two-letter language code. For example, setting it to es will cause the captions to be in spanish

Default: undefined

Youtube.configure({
  ccLanguage: 'es',
})

ccLoadPolicy

Setting this parameter’s value to true causes closed captions to be shown by default, even if the user has turned captions off

Default: false

Youtube.configure({
  ccLoadPolicy: true,
})

disableKBcontrols

Disables the keyboards controls for the iframe player

Default: false

Youtube.configure({
  disableKBcontrols: true,
})

enableIFrameApi

Enables the player to be controlled via IFrame Player API calls

Default: false

Youtube.configure({
  enableIFrameApi: true,
})

origin

This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the enableIFrameApi parameter value to true, you should always specify your domain as the origin parameter value.

Default: ''

Youtube.configure({
  origin: 'yourdomain.com',
})

endTime

This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. For example, setting it to 15 will make the video stop at the 15 seconds mark

Default: 0

Youtube.configure({
  endTime: '15',
})

interfaceLanguage

Sets the player’s interface language. The parameter value is an ISO 639-1 two-letter language code. For example, setting it to fr will cause the interface to be in french

Default: undefined

Youtube.configure({
  interfaceLanguage: 'fr',
})

ivLoadPolicy

Setting this to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default

Default: 0

Youtube.configure({
  ivLoadPolicy: '3',
})

loop

This parameter has limited support in IFrame embeds. To loop a single video, set the loop parameter value to true and set the playlist parameter value to the same video ID already specified in the Player API URL.

Default: false

Youtube.configure({
  loop: true,
})

playlist

This parameter specifies a comma-separated list of video IDs to play.

Default: ''

Youtube.configure({
  playlist: 'VIDEO_ID_1,VIDEO_ID_2,VIDEO_ID_3,...,VIDEO_ID_N',
})

modestBranding

Disables the Youtube logo on the control bar of the player. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player

Default: false

Youtube.configure({
  modestBranding: true,
})

progressBarColor

This parameter specifies the color that will be used in the player's video progress bar. Note that setting the color parameter to white will disable the modestBranding parameter

Default: undefined

Youtube.configure({
  progressBarColor: 'white',
})

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

Source code

packages/extension-youtube/