Video
Video block is used to display a video on the page.
We are currently in early stage. Properties, structures and naming conventions may differ in the near future. If you would like to provide feedback, please feel free to join our new community at Discord.
Installation
You can add the pre-configured video elements to your project with the command below. If you only want to install the BaseplVideo block check the reference here.
npx @basepl/cli add BaseplVideoCurrently, basepl doesn't automatically update the payload types. So if you install the configuration and the component you have to update the types. Simply run
npm generate:typesIf not you will get an error in the blocks/BaseplVideo/Component.tsx file. Because the BaseplImageType is not present.
Video block configuration
Here is the result in the admin panel and the pre-configured video block itself. You can change it to your needs in the blocks/BaseplVideo/config.tsfile.
Video component configuration - optional
Per default the video block will be installed with prebuild and fully customizable component. To only install the video block read more here.
The basepl video act as a wrapper for the nextjs video tag, to apply admin configurations. You can change it to your needs in the blocks/BaseplVideo/Component.tsx.
If you want to find out more about the video tag and configuration options, take a look at the documentation at w3schools.
Predefined video options
If you want to include an video, you can upload one or choose one from the media collection. You can also choose between different video options.
Size
You can select between different sizes. If you select the option "custom" you can set either absolute width and height or relative width via input fields.
Object settings
If you choose the "custom" option, you can define the object fit and position using the select fields.
Player settings
You can check the checkbox if you want to enable the specific player settings.