carta-plugin-video

This plugin adds ability to render online video from Youtube or Vimeo.

Inspired by markdown-it-video

Installation

npm i carta-plugin-video

Setup

Styles

Import the default theme, or create you own:

import 'carta-plugin-video/default.css';

Note that the align function needs the default css to work properly.

For custom styles, this is an example of the generated HTML:

<div class="video-container center">
	<iframe
		width="640"
		height="390"
		src="<the URL>"
		frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
		allowfullscreen>
	</iframe>
</div>

Extension

<script>
	import { Carta, MarkdownEditor } from 'carta-md';
	import { video } from 'carta-plugin-video';
	import 'carta-plugin-video/default.css';

	const carta = new Carta({
		extensions: [
			video({
				// Optional options
			}),
		],
	});
</script>

<MarkdownEditor {carta} />

Usage

You can use either video ID (e.g: dQw4w9WgXcQ) or video URL (e.g: https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley)

For Youtube:

@[youtube](dQw4w9WgXcQ)
@[youtube](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

For Vimeo:

@[vimeo](347119375)
@[vimeo](https://vimeo.com/347119375)

Options

Here are the options you can pass to video():

export interface VideoExtensionOptions {
	/**
	 * Width of the video (in pixels or percentage string), defaults to 640.
	 */
	width?: number | string;
	/**
	 * Height of the video (in pixel or percentage string), defaults to 360.
	 */
	height?: number | string;
	/**
	 * Horizontal alignment of the video, defaults to 'center'.
	 */
	align?: 'left' | 'center' | 'right';
	/**
	 * Allow fullscreen, defaults to true.
	 */
	allowFullscreen?: boolean;
	/**
	 * Use youtube-nocookie.com domain, defaults to false.
	 */
	noCookie?: boolean;
}