Video block missing settings

In my index.php I only have a div with gjs as id, and here I also call some assets (stylesheet and grapesjs script files).

In grapesjs-custom.js I have the following...
`jQuery(function($) {
  var editor = grapesjs.init({
    avoidInlineStyle: 1,
    container : '#gjs',
    fromElement: 1,
    showOffsets: 1,
    plugins: ['gjs-preset-webpage'],
    pluginsOpts: {
      'gjs-preset-webpage': {
        // options
      }
    },
    assetManager: {
      upload: '/uploads/images',
      uploadName: 'files',
      storeOnChange : true,
      storeAfterUpload : true,
      assets : [
        { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250},
        { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250},
        { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728},
        { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
        { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
      ]
    }
  });

  console.log(editor);

  editor.addComponents({
    type: 'video'
  });

  editor.on('load', function() {
    var $ = grapesjs.$;`