In this post, we will see how easy it is to build a cool looking video banner web part using SPFx with the help of PnP reusable property pane controls. First of all, the requirements:
This is what the PnP React Video Banner web part offers, once you add the web part to your page, you will be able to select a video (using the file picker control from the PnP Reusable Property Pane Controls), you will be able to modify the text overlay and its color, control the height of the video area and lastly (at least for now) modify the brightness:
These settings would provide you with a web part that looks like this:
Now let's have a look at the code itself which is pretty simple. The file structure can be seen below:
The web part has only one functional component named: VideoBackground that accepts the following properties as defined in the IVideoBackgroundProps.ts file: wpTitle (string), videoUrl (string), labelColor (string), brightness (number), height (number).
The video url and the label color are set with the help of PnP Property Pane Controls as shown below:
Once the properties are setup on the VideoBackgroundWebPart.ts file, we pass them to the VideoBackground.tsx component.
Notice the ref attribute on the video control? The reason we have it is that we want to refresh the video whenever we change the video url. By default, when changing the properties, all values will be reflected except for the video url, it needs to be explicitly refreshed on the video control. So we get a reference to the video control using React's ref, where we define the "vRef" value on the functional component itself.
We then use React's useEffect to check if the video url has changed or not, if it has changed, we call the load() function on the video reference itself:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.