A video block allows you to easily embed a video in a CMS page from a video service such as YouTube or Vimeo.
Select Video Block from the Block Menu in the CMS utility bar and create a new video block (note that your available CMS blocks vary depending on the version of HOC that you are using).
Define the parameters for your video.
- Name your video block. We recommend being descriptive, e.g., "Home Page - Intro Video".
- Select the CMS region where you want your video to appear.
- Give your video a Title (optional)
- Enter the URL of where your video is hosted. For example, if it is hosted on YouTube, to youtube.com and find the video you want to add to your page. Click on the "Share" link and copy the URL it provided, which usually looks something like this: https://youtu.be/dmfahS0Zi0Y. Paste this URL in the URL field of the video block.
- Add a description (optional)
- Select where the description will be displayed in relation to the video (optional)
- Select the size of the video. This is how much screen space it will use.
- Use the advanced settings to specify which page(s) you want the video to appear on, and in what order relative to other blocks or content on the page.
- Save the Settings of your video.
- You are done!
Alternative Method: Embed a video using the HTML Block (use for Google Drive hosted videos)
Many video services, such as Google Drive, YouTube, and Vimeo, provide an "embed" code that you can use to embed a video in a CMS HTML block. This allows you to add video using the HTML block instead of the Video block, though it may require that you have some basic HTML skills.
We recommend using the CMS Video Block described in the section above for YouTube and Vimeo. For Google Drive, you can only use an HTML block and the embed code as instructed here:
- In the CMS utility menu, go to Blocks -> HTML Editor.
- In your Google Drive, open your video, click on the three dots on the top right, and open Share. Make sure it is shared with all users.
- Click again on the here dots and select "Open in new window."
- In the new window, click on the three-dot icon and choose “Embed item”.
- In your new HTML Editor, select "Source" and copy the embed code.