Uploading / embedding video in articles
Like images, video can be easily embedding into your knowledge base articles. HelpSite offer multiple options for adding videos into your articles.
Videos can be embedded by URL, embedded via an "embed code", or uploaded directly through our WYSIWYG article editor.
Embed videos from a dedicated video platform (recommended)
For best results, we recommend you upload your videos to a video hosting site such as YouTube, Vimeo, Vidyard, or Wistia, and then to use their embed features to allow your videos to show nicely in your HelpSite articles.
For many video providers (YouTube, Vimeo, Vidyard), you can simply paste the URL of the video into the spot shown below:
For other providers, you'll want to grab their "embed code" and paste it in the appropriate option:
However you should always use an "iframe" type of embed code rather than a "script tag" embed code.
Embed videos from Wistia
This embed code should have a line like "
<iframe ...></iframe>", which is what you want to copy. A full example of the code looks like this:
<iframe src="//fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="620" height="349"></iframe>
NOTE: Do not copy the line that includes "
<script ...></script>". You should only copy the "iframe" tag. If you include the script tag, you'll get an error message "Something went wrong. Please try again".
Paste the iframe tag snippet into the "Embedded Code" textbox shown in the screenshot above.
Upload videos directly
Alternatively, you are able to upload videos directly to HelpSite. Our current per-file upload size restriction is 10MB and supports mp4, webm, and ogg file types.
There are a few downsides to uploading videos directly to HelpSite. In addition to the restriction on file size and file types, videos uploaded directly will not have the same behind-the-scenes compression and format intelligence that professional video hosting websites do to serve the right video size and format to each user and stream it as quickly as possible.
Advanced: Changing the size your videos are displayed
If you've embedded your video using one of the methods above, you should be able to change the size the player is presented at, either by dragging one of the blue corners, or by clicking "Change Size" and then entering a width & height.
That's all there is to it!
Using the method above will allow you to set your width and height to a particular number of pixels.
However it is possible to also make your iframe videos be embedded responsively at 100% width while maintaining aspect ratios with code like this:
<span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false" style="display: block; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"><iframe src="https://www.youtube.com/embed/QILiHiTD3uc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe></span>
For responsive embeds, this code snippet needs to be pasted via the Code View in the article editor, rather than by pasting it in the Insert Video widget as described in the other methods used above.
If you have any questions or need help, please do contact us!