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:
Find the embed code on the video hosting platform you're using
Copy the code
Navigate to your page in Novi
Click within the page where you'd like the video to appear
In the content editor toolbar, go to Insert > Media
Select the Embed tab
Paste your video's embed code
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)
Get your video embed code from the video platform
Copy the embed code and paste it in the Source Code of a page (Tools > Source Code)
Directly before the code, enter the following: <div class="video-responsive">
Directly after the code, enter the following: </div>
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)
Head to embedresponsively.com
Enter your video URL
Get the video embed code from the video platform
Copy the embed code and paste it in the Source Code of a page on your website
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>