Issue #2232Opened August 29, 2019by jeff-panart0 reactions

[Questions] Video block missing settings

Question

Hi,

Locally installed GrapesJS and the addon 'preset-webpage', which gets me a basic layout with some blocks. One of those blocks is the video block. I can drag&drop a video on the canvas, but am not able to set a youtube url. In the demo I see, in the right sidebar, a Settings option. I'm missing that one in my install.

Is this something I have to init separately?

Thanks in advance for the input.

Answers (2)

artfSeptember 4, 20190 reactions

No, the video component is part of the core, so if do this editor.addComponents({ type: 'video' }) even without any plugin you should see the video traits correctly

jeff-panartSeptember 4, 20190 reactions

Hi artf,

Hmz, then I think I did something else wrong.. adding the editor.addComponents line, doesn't make any difference.

Code SnippetTEXT
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.$;`

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.