Adding Video to Your Site

Using the Legacy Customizer? Legacy Customizer steps: Customizer: Adding Videos to Pages and Posts [Codeless] · Legacy Customizer steps: Leveraging Video Modules on Your Codeless Website

To show a video on your website, you add a Video module to a page. Then you give the module a video from YouTube, Vimeo, an embed code or a file you upload. Your changes go into a draft. Visitors see them after you publish.

Add a Video module

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.
  3. To use another page, select Pages in the top menu, then select the page. For more, see Editing an Existing Page.
  4. Move the pointer to the place on the page where you want the video, and select the + button. The Add module panel opens.
  5. Scroll down the New tab to Video.

The Video module type in the Add module panel

  1. Video: The Video module type. The badge shows it has seven layouts.

Select Video. The panel shows the seven layouts.

The layouts of the Video module

  1. Back: Returns to the list of module types.
  2. Five: A layout with one large video and a row of smaller videos. Select a layout to add the module.

Layouts One to Four show one video with a heading and text beside it. Layouts Five, Six and Seven show more than one video. Select a layout. The new module appears on the page.

You can change the layout later. Point at the left or right part of the module, select the customize button in its toolbar, and choose another layout under Module layouts on the Design tab.

Add your video

The new module has boxes for a heading, a text and the video.

A new Video module with the toolbar of its video box

  1. Click to add a heading: The heading of the module. Select it to type.
  2. Click to add a video: The place for your video. Point at it to show its toolbar.
  3. Customize Videos: Opens the Edit Videos panel, where you add the video.

Select Customize Videos. The Edit Videos panel opens. Select Add item. A new video card opens.

A new video card in the Edit Videos panel

  1. Embed type: How you give the video: Embed, YouTube, Vimeo or Upload.
  2. Video URL: The address of the video, for example its YouTube or Vimeo page.

Choose the Embed type first:

  • YouTube or Vimeo: Paste the address of the video in Video URL.
  • Upload: Under Video file, select Pick image from Media Library and choose your video file.
  • Embed: Paste the embed code from the video service in Video embed. Select Expand to see the whole code.

Type a Video title at the end of the card. Scroll down the card to set how the video plays.

The playback options of a video

  1. Autoplay video: Starts the video when the page opens.
  2. Mute video: Plays the video without sound.
  3. Loop video: Starts the video again when it ends.

Playback speed sets how fast the video plays. Show captions shows the captions of the video.

To show more than one video, select Add item again. Use the arrows on a card to change its place, and × to remove it.

Add a video to a blog post

To show a video in a blog post, the post needs its own modules.

  1. Open the post. Select Pages, then Blog Posts, then the post.
  2. Select Settings in the top menu.
  3. Select This Blog Post, then the Modules tab.

The Modules tab of a blog post

  1. This Blog Post: The settings of the post that is open in Site Edit.
  2. Modules: The modules of this post.
  3. Enable custom modules: Turn on to give this post its own modules.

When you turn on Enable custom modules, the change goes into your draft. Manage modules then lets you add, reorder or edit the modules of the post.

At the time of writing, Manage modules does not open a module list, so you cannot yet add a Video module to one post. Until this works, put the video on a page and link to that page from your post. For more about post modules, see Setting Shared Modules and Sidebars for Blog Posts, Areas, Agents and Offices.

Publish your video

The new module and its video are in your draft. The draft bar at the bottom of Site Edit shows Unpublished changes with Discard and Publish. Close the open panel, then select Publish to show the video to visitors, or Discard to undo all of the draft.

For more about modules, see Working with Modules and Module Types Reference. For more about drafts, see Publishing and Discarding Drafts.

How did we do?

Setting Up Redirects and Your 404 Page

Organizing Blog Posts with Categories
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support