[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)
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
Hi artf,
Hmz, then I think I did something else wrong.. adding the editor.addComponents line, doesn't make any difference.
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.
Issue #4094
BUG: When drag and drop block into editor in Chrome, not able to drag and drop block
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 97.0.4692.71 (Official Build) (64-...
Issue #2744
[QUESTION] Disable a block drag&drop
Hello everyone, I would like to make forbidden the drop of one block before another specific one. Context : i've create a new trait for som...
Issue #1563
[Bug] Trait - Change Video Provider issue
Version: 0.14.40 Bug: When you change "Provider" field -> all settings gone. It happens in Chrome, Safari and Firefox, last versions. How t...
Issue #1420
Customizing Block(section block) While Dragging it
Hi I have seen that there was two separate blocks to add 'sections' and 'columns'.We have a flow like when we drag a section into canvas ne...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.