Magazine Blocks by BlockArt

Gutenberg Editor, Magazine & Newspaper Website Builder, Page Builder with Posts Blocks

Post Video

The Post Video Block is suitable for displaying the videos uploaded on your posts. The blocks display a thumbnail of the video, which helps to play a full-screen video.

After you have chosen the Post Video Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:

General #

The settings section mainly consists of two options, as listed below:

General #

  • Column – It lets you choose the number of columns to display the video. You can set the column to 1, 2, and 3.

Query #

It consists of the settings related to the Category and Post Count. It allows you to choose and assign a specific category so that the video gets displayed from the selected category.

Likewise, you can choose the number of videos to be displayed on the block according to the site’s requirements.

Style #

Under the style option, you’ll find the following options available:

General #

  • Gap – It refers to the space between the post video displayed on your site. You can enter a number straight into the field or use the slider to change the gap value in pixels. Moreover, you can set the gap value to be different on various devices (Desktop, Tablet, and Mobile).

Image #

  • Border Radius – It allows you to change the border radius value of the video thumbnail. It lets you add round corners to the video thumbnail. According to the site requirement, you can set the border-radius value. Also, you can choose any units like px, em, %, or rem.

Moreover, you can set the border radius values for various devices (Desktop, Mobile, and Tablet).

Advanced #

The Advanced section consists of four options for the Post Video block.

Spacing #

Under the spacing section, you can find the following options available:

  • Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
  • Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).

Z-Index #

It allows you to set the priority of the Post Video block according to the site’s requirements.

Responsive Condition #

Using the option, you can enable/disable displaying the block on various screen sizes:

  • Hide on Desktop – It hides the Post Video block on the Desktop.
  • Hide on Tablet – It hides the Post Video block on the Tablet.
  • Hide on Mobile – It hides the Post Video block on Mobile.

You can make the changes upon your site requirements.

Advanced #

Under the option, you can set the CSS ID and Classes for this particular Post Video block. The available options are listed below:

  • Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
  • CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
  • Additional CSS Class(Es) – It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.

For example, if you want to change the width of the post-video block, you can add a class such as post-video-width to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

Upon adding the code, it will make the changes only to this particular block and not others.

Powered by BetterDocs

Scroll to top