Video Elements How to Add Video Mask in Bricks Builder Using BricksFly Estimated reading: 3 minutes 41 views BricksFly Video Mask Element lets you present video content inside a custom mask shape within your Bricks Builder layout. Follow the steps below to activate the element and configure its button, video, and mask settings. Requirement Make sure you have installed: Bricks Theme BricksFly Pro Activate Video Mask in BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Elements tab. Under Video, toggle on Video Mask. Step 1: Configure the Button Other Section Text Color: Controls the color of the supporting text displayed around the Video Mask button area. In this example, yellow is selected, but you can choose any color based on your preference. Title: Sets the text displayed with the video play button. Close Title: Sets the text displayed when the video is open, allowing you to provide a label for closing the video. Here, “Watch Video” is added as the title. Play Icon: Selects the icon used for the video play button. Icon Position: Controls where the play icon appears in relation to the button content. In this example, center is selected. Offset X: Adjusts the horizontal position of the play icon. Increasing or decreasing the value moves the icon left or right. For this example, no value is added, so the field is left blank. Offset Y: Adjusts the vertical position of the play icon. Increasing or decreasing the value moves the icon up or down. In this example, the field is left empty without entering any value. Step 2: Configure the Video Video Link: Adds the URL or source of the video displayed inside the Video Mask Element. Autoplay: Automatically starts playing the video when it becomes active or available for playback. For this example, the autoplay button is enabled. Mute: Starts the video without sound when enabled. This option is commonly used when Autoplay is enabled. In this example, the option is disabled. Plays Inline: Keeps the video playing within the page instead of automatically opening it in a full-screen video player on supported devices. For this example, the option is enabled. Loop: Automatically starts the video again after it reaches the end. In this example, the option is disabled. Poster: Allows you to select an image that appears as the video preview before playback begins. Height: Controls the height of the video area. In this example, no height value is added. Border: Allows you to customize the border around the video, including its width, style, and other available border settings. Step 3: Configure the Video Mask Shape: Selects the shape used to mask the video. The video remains visible within the selected mask shape. Size: Controls the overall size of the mask shape. In this example, the Size value is set to 300. Offset Y: Adjusts the vertical position of the mask. Use this setting to move the mask upward or downward. In this example, the Offset Y value is set to 50%. Offset X: Adjusts the horizontal position of the mask. Use this setting to move the mask left or right. In this example, the Offset X value is set to 50%. Done! You have successfully configured the BricksFly Video Mask Element. You can now adjust the video, button, and mask settings to match your page layout and design.
