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

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, go to Insert > Media
  6. select the Embed tab
  7. Paste your video's embed code & click OK. Don't forget to save your page!

Make Embedded Videos Responsive

With video providers being a third party, we don't have much control over the embed code that providers give you to make videos mobile-responsive. Depending where you're placing the video on your website, this may cause an issue. But, never fear! 

Making your videos responsive is simple, but you will need to go into the source code of the page. Simply follow the steps 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.

>> Learn more about editing frontend content, including how to access the Source Code.

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 embed 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>

Did this answer your question?