How To Add A Video On A Page

Part 1: Navigate To The Page

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages

3. From the content page list either add a new page or edit an existing page

Note: information on how to add a new page and how to edit an existing page can be found in more depth within separate knowledgebase articles.

Part 2: Adding A Video Module

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Video” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a section is covered in its own knowledge base article

Part 3: Applying the Video Settings

1. Once the video module has been added to the page, hover over the module and click the edit button, the edit button appears as a pencil icon in the top right of the section.

2. Once the edit window loads you will have the ability to add your video, to do this first select the Video Type. Video type allows you to choose where the video is hosted, the supported options are Youtube or Vimeo. You also have the ability to upload a video directly to the image and file manager, these files must be mp4 format and under 80mb in size. Depending on the video type chosen the settings within the edit window will change, these are listed below:

• Youtube

  • Ratio - this allows you to choose an aspect ratio for the video, by fault modern video is 16:9

  • Video ID - this is the ID of the video you wish to add from youtube. This can be found within the URL of the video. Based on the following example URL the ID would be “W0_GggETrS0”. Example URL https://www.youtube.com/watch?v=W0_GggETrS0

  • Allow Full Screen - this allows users to maximise the video to full screen

  • Show Related Videos - this allows Youtube to pull through related videos, we recommend setting this to “no”

  • Show Controls - this will show the Youtube playback controls, we recommend this to be set to “yes”

  • Auto Play - this can be used to automatically play the video once the page loads

  • Muted - this can be used to remove the audio from the playback

• Vimeo

  • Ratio - this allows you to choose an aspect ratio for the video, by fault modern video is 16:9

  • Video ID - this is the ID of the video you wish to add from youtube. This can be found within the URL of the video. Based on the following example URL the ID would be “472793877”. Example URL https://vimeo.com/472793877

  •  

• • Allow Full Screen - this allows users to maximise the video to full screen

  • Show Controls - this will show the Youtube playback controls, we recommend this to be set to “yes”

  • Auto Play - this can be used to automatically play the video once the page loads

  • Muted - this can be used to remove the audio from the playback

• Custom Video

  • Video URL - allows you to either enter the direct URL of the video if hosted from a third party file server, or upload a video directly from Image and File manager.

  • Poster Image - allows you to select a placeholder/thumbnail image for the video

  • Ratio - this allows you to choose an aspect ratio for the video, by fault modern video is 16:9

  • Show Controls - this will show the Youtube playback controls, we recommend this to be set to “yes”

  • Auto Play - this can be used to automatically play the video once the page loads

  • Muted - this can be used to remove the audio from the playback

  • Auto Loop - allows you to set the video to continuously loop

3. Once you have added your video and its settings click the blue Save and Close button to save the video content module.

4. Once you have saved the video module and finished building your page, click the “Save” button on the bottom of the side menu to save the page and apply the video.

Note: always remember to follow the final point and save the page itself, or the hard work you have done will not be applied

• To add one of these videos,navigate to the Youtube or Vimeo video you want to add and examine the URL at the top of your browser.
• You will then copy everything in the link which comes after youtube.com/watch?v= for youtube or everything after vimeo.com/ for Vimeo (This is your Video ID)
• You will then go to your web console and navigate to the website tab, then click manage pages, and then content pages.
• You will then find the page you wish to add your video to and click "edit", if you do not have a page you will select add page, responsive and default.
• You will then drag a section into your page where you wish to place the video if one is not already there.
• You will then drag in a video module from the drag and drop window on your left.
• Hover over the video module and click where it says video or click the pencil located in the top right of the video module box.
• You will then be presented with a video box which looks like this:
• Click the top drop down and select either, Youtube or Vimeo, depending on the type of video you wish to add.
• You will then paste your Video ID into the video ID box and you will see your video appear on your website.