Inserting video into your website is easy if your video is already publicly hosted on YouTube or Vimeo. It can be full width or smaller if inserted into a column.

To add a video to your page: While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type “video” in the Block search field to filter all blocks by “video”. Select the desired video block. The component will load into your page. Click on the block you just loaded. The name of the block will show up over a light gray band above the block. Click on the three vertical dots […] and select “convert to regular block.” You are now ready to add the link to your video so it will show up on your page.

Here are some different ways you can insert video into your website.

Two Columns, Video on the Left, Text on the Right

Reusable Block Name: Video__ Two Columns video text

Videos can be added and they will stack on mobile

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed id semper risus in. Volutpat diam ut venenatis tellus. Risus in hendrerit gravida rutrum quisque non tellus. Bibendum neque egestas congue quisque egestas diam. Velit laoreet id donec.

YouTube Video

Reusable Block Name: Video__Full Width and YouTube

These two blocks embed a YouTube video.

Tube notes: As for the right way to embed YouTube videos: When it comes to Gutenberg, there is a YouTube embed block, so I believe that will be the right way. However, if you chose to embed YouTube video with the iframe option that is available on YouTube, you have control over when to start playing the video, whether you wanted to display the controls or not, so in some cases, this will be the better way. To add the iframe, you have to select the custom HTML block rather than the YouTube embed block.

Vimeo Video

Reusable Block Name: Vimeo (under Embeds)

Video Banner with Modal Overlay and Title

Reusable Block Name: Banner__ Video Background with text overlay

This is a wide cover block with a video background.

Usage Tips

What you need to know: These are samples that you can pull in from the Reusuable Block library. IMPORTANT!! Videos will not show until you convert the “Reusable Block” to a “Regular Block”.

Social Embeds

If you are looking to embed social posts into your site, check out this page.

Skip to toolbar