Online Store

Videos block

With Videos block, you can embed video on your page. There are many benefits of embedding a custom video to your website. You can add a DIY video tutorial, video testimonial, or a demo of your product. Videos are a great way to get your message across in a format that visitors easily digest.

Here’s how to add the Videos block to your page:

  1. Choose a location where you want to add your Videos block and click the Add a block (+) Plus button.
  2. In the Block library, scroll down the list to the Videos block (or use the search at the top of the menu to reach it faster) and click it.

    Videos-block-1.png
  3. Click on the pre-designed Videos block layout to add it to your page. 

Customizing block settings

You have several customization options for the Videos block with the control pane. To activate its control pane, click anywhere on the block and then click the Block settings icon.

Videos-block-2.png

In the Layout tab, you can switch the block layout and choose which elements to display in the block. 

To switch the block layout, click the respective button, select a new block content layout, and click Submit. When you click the layout thumbnail, it appears on your page so that you can preview it better. But if you click Cancel, you will abort the action.

Videos-block-3.png

To hide a specific block element (for example, to remove a button), uncheck the blue tick next to the element’s name.

Videos-block-4.png

In the Appearance tab, you can make the following changes:

  • Replace the background image (only for layouts that have one).
  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Background settings: Add a black & white filter only to the background of this block.
  • Media settings: Add a black & white filter to the block’s video and background; add background image overlay.

Read about block customization options in detail in our Block settings article. 

Editing block elements

To replace the demo text with your own text in the Video block, click the text element and type new text in. You can also paste the text from a text editor you are using.

Learn more about how to edit your text in blocks.

Note: Remember to click Save in the top right corner of your screen to keep the changes and Publish to make the changes live.

Embedding the video

To embed a video file to your website, first you need to upload it to a video hosting platform like Youtube, Vimeo, and others. After uploading, you receive an HTML embed code and an URL (link) of the video. Copy the code or the URL and paste it to the respective tab in the Sitebuilder. 

Read our Embedding a video tutorial for detailed instructions.

Resizing your video

Video container resizing can be useful if you choose to include a vertical video or a full Facebook post that includes a video. This types of video are usually longer than the video container’s default size, so you’d need to make it larger to see anything below the video. 

Here’s how to do this: 

  1. After embedding a video, click the video to activate the resize control on the bottom border.
  2. Drag the control up or down to resize the video. The layout of the block will adjust automatically. 

Remember to Publish your website to make your changes live.

Editing buttons

You can edit buttons in your video block to lead to different pages on your website or to an external link. To edit buttons, follow the steps outlined in the Editing buttons tutorial.

Duplicating the Videos block

If you would like to showcase more videos on your page, you can make copies of the Video block. Here’s how you can do it:

  1. Hover over the Videos block to trigger its control pane.
  2. Click the Duplicate icon.
  3. The identical Videos block will appear beneath the original one. Edit it as described in this tutorial. 

Read more about managing your blocks in our dedicated tutorial.

We hope this article was helpful. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
0 out of 0 found this helpful