# ghostkit/3.7.2/gutenberg/blocks/video/transforms.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.7.2. 170 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.7.2/code/gutenberg/blocks/video/transforms.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.7.2/raw/gutenberg/blocks/video/transforms.js
- Modified: 2026-08-26T18:35:36+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.7.2/code/gutenberg/blocks/video/transforms.js#L10-L20`.

```javascript
import { createBlock } from '@wordpress/blocks';

// parse youtube ID
function getYoutubeID(ytUrl) {
	const regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#&?]*).*/;
	const match = ytUrl.match(regExp);
	return match && match[1].length === 11 ? match[1] : false;
}

// parse vimeo ID
function getVimeoID(vmUrl) {
	const regExp =
		/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
	const match = vmUrl.match(regExp);
	return match && match[3] ? match[3] : false;
}

// prepare attributes for core embed
function prepareAttributesForCoreEmbed(attributes) {
	let aspectRatio = '16-9';
	const { video, videoAspectRatio } = attributes;
	let { className } = attributes;

	if (videoAspectRatio === '21:9') {
		aspectRatio = '21-9';
	} else if (videoAspectRatio === '4:3') {
		aspectRatio = '4-3';
	} else if (videoAspectRatio === '3:2') {
		aspectRatio = '3-2';
	}

	if (aspectRatio) {
		className = `wp-embed-aspect-${aspectRatio} wp-has-aspect-ratio ${className}`;
	}

	return {
		url: video,
		className,
	};
}

export default {
	from: [
		{
			type: 'block',
			blocks: ['core-embed/youtube', 'core-embed/vimeo'],
			isMatch(attributes) {
				return (
					attributes && attributes.type && attributes.type === 'video'
				);
			},
			transform(attributes) {
				let aspectRatio = '16:9';
				const { url, className } = attributes;

				if (className && /wp-embed-aspect-21-9/.test(className)) {
					aspectRatio = '21:9';
				} else if (className && /wp-embed-aspect-4-3/.test(className)) {
					aspectRatio = '4:3';
				} else if (className && /wp-embed-aspect-3-2/.test(className)) {
					aspectRatio = '3:2';
				}

				return createBlock('ghostkit/video', {
					video: url,
					videoAspectRatio: aspectRatio,
				});
			},
		},
		{
			type: 'block',
			blocks: ['core/video'],
			isMatch(attributes) {
				return attributes && attributes.id;
			},
			transform(attributes) {
				const { id, src, muted } = attributes;

				const attrs = {
					type: 'video',
					videoVolume: muted ? 0 : 100,
				};

				if (/\.ogv$|\.ogg$/.test(src)) {
					attrs.videoOgv = src;
					attrs.videoOgvId = id;
				} else if (/\.webm$/.test(src)) {
					attrs.videoWebm = src;
					attrs.videoWebmId = id;
				} else {
					attrs.videoMp4 = src;
					attrs.videoMp4Id = id;
				}

				return createBlock('ghostkit/video', attrs);
			},
		},
	],
	to: [
		{
			type: 'block',
			blocks: ['core-embed/youtube'],
			isMatch(attributes) {
				return (
					attributes &&
					attributes.type &&
					attributes.type === 'yt_vm_video' &&
					attributes.video &&
					getYoutubeID(attributes.video)
				);
			},
			transform(attributes) {
				return createBlock(
					'core-embed/youtube',
					prepareAttributesForCoreEmbed(attributes)
				);
			},
		},
		{
			type: 'block',
			blocks: ['core-embed/vimeo'],
			isMatch(attributes) {
				return (
					attributes &&
					attributes.type &&
					attributes.type === 'yt_vm_video' &&
					attributes.video &&
					getVimeoID(attributes.video)
				);
			},
			transform(attributes) {
				return createBlock(
					'core-embed/vimeo',
					prepareAttributesForCoreEmbed(attributes)
				);
			},
		},
		{
			type: 'block',
			blocks: ['core/video'],
			isMatch(attributes) {
				return (
					attributes &&
					attributes.type &&
					attributes.type === 'video' &&
					(attributes.videoMp4Id ||
						attributes.videoOgvId ||
						attributes.videoWebmId) &&
					(attributes.videoMp4 ||
						attributes.videoOgv ||
						attributes.videoWebm)
				);
			},
			transform(attributes) {
				return createBlock('core/video', {
					id:
						attributes.videoMp4Id ||
						attributes.videoOgvId ||
						attributes.videoWebmId,
					src:
						attributes.videoMp4 ||
						attributes.videoOgv ||
						attributes.videoWebm,
					muted: attributes.videoVolume === 0,
				});
			},
		},
	],
};

```