Close Menu
Open Menu

Video And Text

  1. Home
    2. ›
  2. Blocks
    3. ›
  3. Media and Text
    4. ›
  4. Video And Text

Video And Text

Display a video using the Dirigible Blocks format.

Usage

The Video and Text block is a parent container that uses the Blocks UX pattern. The first block, however, is a WordPress core Video block rather than a standard Blocks child. For more information about either of these blocks, refer to their respective documentation.

To access the parent level controls listed on this page, make sure you have the parent block selected. If you need help selected the parent block, we’ve got you covered.

Blocks
Video Block
Sample video block settings.

Video Settings

The Gutenberg core Video block is pretty great and has a bunch of settings. We like to use a lot of looping videos, so here’s a quick cheat sheet showing the settings we use to make them.

Note: Some browsers will not autoplay videos unless it is also muted. This is a good thing. Blasting your users with audio the moment they get to your site is a good way to get them to leave (or to transport them back to 1999).

Block Size

Change the size of your blocks.

Adjusting the size of your Dirigible Blocks

The sizing option will change the size of blocks on desktop. This is independent from the Swap Blocks setting, which means that even if you toggle the Swap Blocks option, if the left block is set to be larger, the leftmost block will always be the larger one regardless of which one is being presented on the left.

The default setting makes each block evenly sized (50%). With either of the other two options selected, the sizes are based on the golden ratio, with the larger block set to 61.8% and the smaller block set to 38.2%.

Show More Show Less

Swap Blocks

Change the order of the blocks on desktop.

The Swap Blocks setting is used to change the order of the blocks on desktop and not on mobile.

This is an important distinction and can be used to control the flow of your website on mobile, giving your users the best mobile experience possible.

Even if Swap Blocks is enabled, displaying your media on the righthand side on desktop, the media block will still appear above your content on mobile.

Mobile swap blocks example.

Example mobile stacking.

The same blocks viewed on desktop. In this example, the second Blocks group has Swap Blocks enabled.

Show More Show Less

Video And Text

Up Next