Using videos (from sites like YouTube, Wistia or Vimeo) is a great way to utilize multimedia on your website! Read on to learn how to format these videos in the best way for your website.

How To Embed Videos Into A Novi Page

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

  • Find the embed code on the video hosting platform you're using.
  • Copy this code.
  • Navigate to your page in Novi.
  • Click within the page where you'd like the video to appear.
  • In the content editor, go to Insert > Media.
  • select the Embed tab.
  • Paste your video's embed code & click OK.
  • Don't forget to save your page!

***

Other Video Tips:

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.

>> To learn more about editing frontend content, including how to access the Source Code, check out this article.

***

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?