Uploading video in the image element

hi. i was trying to implement uploading videos using the image element with the asset manager i stopped at the step where i wanted to replace the img tag with a video tag in the updateTarget call back, i am asking if there is an easy way for implementing that? thanks in advance. here is a snippet from my code

	var assets = [];

      var editor = grapesjs.init({
        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
		components: '',
		style: '',
        container: '#gjs',
        fromElement: true,
		
        plugins: ['gjs-preset-webpage'],
        pluginsOpts: {
          'gjs-preset-webpage': {}
        },
		assetManager: {
		 assets: assets,
		 noAssets: '',	
		 upload: '/owner/website_front/media/asset_upload',
		 uploadName:'Media', 
		 headers: {},
		 autoAdd: 1,
		 addBtnText: 'Add image',
		 // Text on upload input
		uploadText: 'Drop files here or click to upload',

		modalTitle: 'Select Image',

		 params: {},
		},

		storageManager: {
			type: 'remote',
			stepsBeforeSave: 1,
			urlStore: '',	
			urlLoad: '',
			params: {},   // For custom values on requests
		}
      });
	  
	 // Get the Asset Manager module first
	const am = editor.AssetManager;
	am.addType('video', {
			  view: {
					updateTarget(target) {
					const src = this.model.get('src');
					// Just to make things bit interesting, if it's an image type
					// I put the svg as a data uri, content otherwise
					if (target.get('type') == 'image') {
					  // Tip: you can also use `data:image/svg+xml;utf8,<svg ...` but you
					  // have to escape few chars
					  
					   
//					  target.set('src', `data:mime/type;base64,${btoa(svg)}`);
					} else {
//					  target.set('content', svg);
					}
				  },

				   getPreview() {
					 const src = this.model.get('src');
					 return `<div>
							<video 
								class="gjs-no-pointer" 
								style="height: 100%; width: 100%;"
								src="${src}">
							</video></div>`;
				   },
				    getInfo() {
                     return '<div>'+ this.model.get('src') +'</div>';
                 }
			   },
			   isType(value) {
						// eg. here you might check/parse/fetch url and try to 
						// understand the type
						
						
						if (typeof value == 'string' ) {
							value_parts = value.split('.');
							ext = value_parts[value_parts.length - 1];
							if(ext == 'mp4'){
								console.log('4444');
							return { type: 'video', src: value  };
							}
						}
			   }
		});
am.add({type:'video',src:'https://oidev.daftra.dev/files/db4715bd/medias/d9717_SampleVideo_1280x720_1mb.mp4'});

am.render(am.getAll().filter(asset => asset.get('type') == 'video'
));```