Adding and Formatting Videos on Your Novi Website
Melisa Smith avatar
Written by Melisa Smith
Updated over a week ago


Using videos (from sites like YouTube, Wistia, or Vimeo) is a great way to utilize multimedia on your website.

This article covers the following:


Hosting Your Videos

Before you begin adding a video to your site, you'll first need to upload the video to a hosting site like Wistia, YouTube, Vimeo, etc. 

These video hosting platforms use special servers that are built specifically to stream video content, and for that reason, you'll find that almost every modern website embeds videos vs. hosting them directly. 

This prevents the video files themselves from drastically slowing down your site's load time but also gives you the ability to use the customization tools (thumbnail selection, share settings, video trimming, etc.) that these platforms have already perfected.

Once you have your videos uploaded into the hosting platform of your choosing, embedding them in Novi is simple!


How to Embed Videos into a Novi Page

To embed videos into a Novi page, follow these steps:

  1. Find the embed code on the video hosting platform you're using

  2. Copy the code

  3. Navigate to your page in Novi

  4. Click within the page where you'd like the video to appear

  5. In the content editor toolbar, go to Insert > Media

  6. Select the Embed tab

  7. Paste your video's embed code

  8. Click the Ok button to close the pop-up modal, and don't forget to save your page!

*Please note that the video may not appear if you're logged in as an admin. To confirm that the source code update is working properly, log out or view the page incognito.


Make Embedded Videos Responsive

When you embed videos using the content editor toolbar, Novi will make your videos responsive by default. Simply select Insert ➤ Media ➤ Embed Tab and the video you choose will already be responsive when placed on the page.

If you choose to embed videos using the source code rather than the editor, you may need to follow the additional steps outlined below.

Option 1: Source Code Update (best for YouTube and Facebook videos)

  1. Get your video embed code from the video platform

  2. Copy the embed code and paste it in the Source Code of a page (Tools > Source Code)

  3. Directly before the code, enter the following: <div class="video-responsive">

  4. Directly after the code, enter the following: </div>

  5. Save your work, and done!

*Please note that the video may not appear if you're logged in as an admin. To confirm that the source code update is working properly, log out or view the page incognito.

Option 2: Third-Party Tools (best for other video platforms)

  1. Head to embedresponsively.com

  2. Enter your video URL

  3. Get the video embed code from the video platform

  4. Copy the embed code and paste it in the Source Code of a page on your website

  5. Save your work, and done!

*Please note that this is a third-party tool we like to use, but we cannot provide support for the tool.


Center Embedded Videos

Since videos are automatically aligned to the left when embedded into a page, you may need to add a little bit of code into the embedded HTML in order to center the video.

You can quickly center an embedded video by adding <center> before the original embed code begins and then closing out the code with </center>.

Example:

  • Original Youtube Embed Video HTML Code:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/link" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  • Centered Youtube Embed Video HTML Code:

    <center><iframe width="560" height="315" src="https://www.youtube.com/embed/link" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center>


Related Articles:

Did this answer your question?