UVM Wordpress UVM User Guide

Inserting video into your website is easy if your video is already publicly hosted on YouTube or Vimeo. Some types of video displays require the video to be hosted on the WordPress website.

To add a YouTube or Vimeo hosted 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”. Scroll down to “embeds” and select the desired video block – either YouTube or Vimeo – depending on where your video is hosted. Type in the URL of your video and the component will load into your page.

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

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.

Block used: “Columns” block for the column structure. The left column has a YouTube video and the right column has text.

Videos can be added and they will stack on mobile

By default, a column layout will responsively stack on mobile when a certain breakpoint width is reached. If you look at this page on mobile or ‘fake it’ by making your browser width smaller, you can roughly simulate the mobile view.

You can place a video behind text by using the “cover” block. The video can have a tint overlay of any color and transparency. The copy can be flush left, centered or flush right. It’s important to note here that in this scenario, you have to host the video yourself in the WordPress Media library. (MP4 seems to be the preferred format here). You cannot embed a video from YouTube or Vimeo in this scenario.