Grapesjs Video Bg

Video background component for grapesjs based on bideo

WIP

Video background and mobile buttons not working in canvas but work once project is published. Npm package not yet available.

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-video-bg"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-video-bg'],
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

Summary

• Plugin name: grapesjs-video-bg
• Components
  • component-id-1
  • component-id-2
  • ...
• Blocks
  • block-id-1
  • block-id-2
  • ...

Options

Option	Description	Default
option1	Description option	default value

Download

• CDN
  • https://unpkg.com/grapesjs-video-bg
• NPM
  • npm i grapesjs-video-bg
• GIT
  • git clone https://github.com/Ju99ernaut/grapesjs-video-bg.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-video-bg.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-video-bg'],
      pluginsOpts: {
        'grapesjs-video-bg': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-video-bg';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-video-bg.git
$ cd grapesjs-video-bg

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT