Embedding Video content within Pages

Embedding Video content within Pages

You have two options for embedding video content within pages, you can use the standard "iframe" option in the advanced text editor (CK Editor) on several widgets, or you can use the Source option in the same editor.

Getting your Embed Code
The first thing you need to do is go to Youtube, Vimeo or wherever is hosting the video content and grab the embed code they provide. It should look something like this;
<iframe width="560" height="315" src="https://www.youtube.com/embed/qOD7xMbPliw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Now you're ready to put this into your site.

Using the iFrame Option
In a widget with the CK Text editor option (Content Bar Full Width for example) click on the iFrame option (last option on the second row). This will open a popup screen where you need to type on the following information;
  • URL - this requires you to strip out the URL component of the <iframe> code and past it here. You can find this section in the quotation marks after "src=" - highlighted below;
<iframe width="560" height="315" src="https://www.youtube.com/embed/qOD7xMbPliw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • Width - you can create whatever width you'd like, however a good width is 100%. This means the width of the video will automatically scale to the size of the screen the user has.
  • Height - unfortunately you cant easily set a dynamic height (like the width), so you'll need to pick a default height. 450px is a good option.
  • Align - you can right, left or middle align the video content. Middle alignment is typically good for content that will be taking up the full width of the screen.
  • Name - optional, feel free to name the content to be in line with its purpose.



Click "OK" button once complete. You'll now see a red "iframe" box - if you need to edit this you can double click on the box, otherwise you can save and publish the page and check out how it looks.

Using the Source Option
Using the Source option has the same end output as the iFrame option, however instead of dissecting the iFrame code that youtube or vimeo provide you, you are simply pasting it into the page. To do this open your widget with CK Editor available (Content Bar full width for example), and then click on the first button in the options, called "Source". This will change the view from your simple editor to be a html editor (ie code based editor).

Now all you need to do is paste in the embed code that youtube provided where you want it to go. Note that you might still want to change the height and width to be 100% and 450px respectively, you can do this by editing the values for height and width in the quotation marks.

    • Related Articles

    • Embedding Images Using CK Editor

      Quick Guide Embedding Images using a CK Editor To embed a image into a content zone, go to the “File Library”, find the image you wish to embed and copy the “File URL”.   In the Content Zone you wish to embed the image, place the cursor where you ...

    • Quick Guide - Adding an Embedded Video to a Product

      Go to You Tube and select the clip you want to embed in the Inzant Sales app and select 'Share' Select Embed Tick 'Show player controls' and 'Enable privacy enhanced mode'. Select Copy  To add the Embed code to the product firstly you'll need to be ...

    • Creating a New Blog Article

      Note: To view any of the below walkthrough images in a larger size simply click on them - then click on the cross in the top right corner to close the image window. Blog Article Categories Before creating a new blog article, first make sure the Blog ...

    • Video Guide - Management Portal - Product Bulk Export and Import

      ·       To bulk update your Product data you first need to get an export of the Product information from Inzant Sales. To do this you need to be logged into the Management portal, and open the Reporting screen. ·       Click on the “Export Reports” ...

    • Quick Guide - Deleting a Product Category

      This is a quick guide explaining Deleting a Product & Product Categories using the Inzant Sales Management Portal. Firstly you'll need to be logged into the Inzant Sales Management Portal. Once logged in proceed to open the product search screen ...

    • Popular Articles

    • Home Screen and Navigating the System

      The Home Screen The home screen is the start up screen for the App. It contains links to all the other major screens and provides some KPI information and access to your schedule. In this article we will discuss all the links so you can navigate ...

    • Creating a Retailer

      This article provides a short walk-through tutorial on the steps required when creating a new Retailer Using the Inzant Sales app. To Create a New Retailer touch 'Retailers' on the left of the screen. You will now be able to view a list of previously ...

    • Setting a Retailer to have Website access from the Management Portal

      To enable customers access to the B2B Portal or Website, you need to allow the Contact on a Retailer to have access. After logging into the Inzant Sales Management Portal you'll need to navigate to the Contact or Retailer in question. Finding a ...

    • Inzant Website CMS User Manual

      The latest version (currently version 1.4) of the CMS User Manual is attached, which you can download and use as required.

    • Creating Hyperlinks

      There are two main areas within the CMS that hyperlinks can be created; In a specific content zone provided by a widget. In the CK Editor content entry zone. Both zones offer the same 3 basic link types, Internal URLs, External URLs and Mailto ...

    • Recent Articles

    • Management Portal - Adding a Pricing Rule Walk Through Video

      Watch the linked video as we walk through creating a new pricing rule, set conditions for discounts, select products, choose applicable price lists, and schedule the rule for auto-publishing. Check out the detailed steps and explanations below to ...

    • Performing a Hard Reset on an iPad

    • Adding a Favourites List to a Retailer

      In this video, I will show you how to add a favourites list to a retailer. I will guide you through the steps, including selecting the retailer, navigating to the favourites section, and adding a list. I will also explain how to choose the contact ...

    • Accessing and Managing Favourites Lists

      In this video, I will show you how to access and manage your favourites lists on our platform. I will guide you through the steps to access your favourites list, apply filters, and view specific categories. Additionally, I will demonstrate how to add ...

    • Creating Bespoke Favorites Lists for a Contact

      In this video, I will show you how to create a bespoke favorites list for a specific contact. Sometimes, certain contacts may have unique preferences, and it's important to cater to their needs. I will guide you through the process of selecting the ...