Vimeo Editor Component for Netlify CMS

.eleventy.js

module.exports = function(eleventyConfig) { // This only happens once in your template!
  
// Blah blah, whatever other Eleventy stuff you need.

eleventyConfig.addLiquidShortcode("vimeo", (vimeoId, aspectRatio) => {
  return `<div class="aspect-ratio" style="--aspect-ratio: ${aspectRatio}"><iframe src="https://player.vimeo.com/video/${vimeoId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video video--vimeo"></iframe></div>`;
});
  
// Blah blah, whatever other Eleventy stuff you need.
  
 }; // This only happens once in your template! 

vimeo-embed.js

CMS.registerEditorComponent({
  // Internal id of the component
  id: "vimeo",
  // Visible label
  label: "Vimeo",
  // Fields the user need to fill out when adding an instance of the component
  fields: [
    {name: 'id', label: 'Vimeo ID', widget: 'string'},
    {name: 'aspect_ratio', label: 'Aspect ratio', widget: 'select', multiple: false, options: [ "16/9", "4/3", "1/1" ], default: "16/9"}
  ],
  // Pattern to identify a block as being an instance of this component
  pattern: /^{% vimeo \"(\S+)\", \"(\S+)\" %}$/,
  // Function to extract data elements from the regexp match
  fromBlock: function(match) {
    return {
      id: match[1]
    };
  },
  // Function to create a text block from an instance of this component
  toBlock: function(obj) {
    return `{% vimeo "${obj.id}", "${obj.aspect_ratio}" %}`;
  },
  // Preview output for this component. Can either be a string or a React component
  // (component gives better render performance)
  toPreview: function(obj) {
    return (
      `<iframe src="https://player.vimeo.com/video/${obj.id}" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`
    );
  }
});