Inserting a video into the WYSIWYG editor

Use the WYSIWYG editor to include videos in your content. You can either insert videos directly into the content or insert them from online locations via URL or embed code. While not limited to these, popular repositories include hosts such as YouTube, Vimeo, or a folder channel within your digital workplace.

A video inserted into the editor.

Sections in this article:

Considerations

  • By URL or Embed: When inserting videos by URL or embedded code, some video sources may not provide one of these methods. The source URL must correspond to the location of the video itself. Entering the URL of a webpage containing a video will not result in the video being inserted into your content. See the instructions below regarding obtaining this URL from common video hosting services.
  • Access to the video: When videos are not uploaded directly to the content, your members must have access to the source video file to view it. For videos on external repositories, the video should be public or shared with the necessary users using the video provider's sharing options. For videos in a folder channel of your digital workplace, the Access Rules on the video determine who can view it.
  • HTTPs vs. HTTP: When videos are not uploaded directly to the content, they must come from a source that uses HTTPS. Videos that contain a source that uses HTTP will not display in the editor. Often, all you need to do to correct this is to add an "S" to the HTTP. If the video repository you are embedding from does not support HTTPS, you will need to find an alternative repository for the video. If you can download the video, do so and then upload it to a folder channel in your digital workplace. Once uploaded, you can generate a valid embed link.
  • Resizing: Videos scale to fill the available width. 
  • Default video resolution of videos embedded from folder channels: Videos you embed from a folder channel default to 360p. Viewers can increase the resolution to 720p when playing the video.
  • Autoplay: When inserting videos by URL, the Autoplay option is not currently supported, and selecting this option will not result in the video automatically playing.

  • Valid Embed Code format: Embed codes must only be an iframe tag. Additional code before or after the iframe tag will cause the video insert to fail.

    A valid embed code:

    <iframe src="https://player.vimeo.com/video/207352451" width="200" height="113" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

    An invalid embed code:

    <iframe src="https://player.vimeo.com/video/207352451" width="200" height="113" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> 
<p><a href="https://vimeo.com/207352451">Igloo Software - Do You Igloo?</a> from <a href="https://vimeo.com/astrodogmedia">Astrodog Media</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Insert a video from a folder channel in the digital workplace

While you are creating content in the WYSIWYG editor:

  1. Open a separate browser tab and go to the video file in the digital workplace.
  2. Below the file preview, select Embed.
  3. Below the video, copy the embed code.
  4. Return to the tab with the WYSIWYG editor.
  5. On the editor's toolbar, select More Rich and then Insert Video.
  6. Select Embedded Code.
  7. Paste the embed code you copied in Step 3 into the provided text box.
  8. Select Insert to embed the file.

Insert a video from YouTube or Vimeo as an embed

  1. Open a separate browser tab and go to the video.
  2. Copy the embed code: 
    • In YouTube, below the video, select Share. Select the < > Embed tab, and then Copy.
    • In Vimeo, below the video, select Share. Select the < > Embed tab, and then < > Copy embed code.
  3. Return to the tab with the WYSIWYG editor.
  4. On the editor's toolbar, select More Rich and then Insert Video.
  5. Select Embedded Code.
  6. Paste the embed code you copied in Step 2 into the provided text box.
  7. Select Insert to embed the file.

Insert a video from Google Drive as an embed

The video's access permissions set in Google Drive will affect the visibility of the video once embedded into the digital workplace. 

While you are creating content in the WYSIWYG editor:

  1. Open a separate browser tab and go to the Google Drive folder that contains the video.
  2. Next to the video file, select the kebab menu, hover over Open with and select Open in a new window to open the video into a new window.
  3. Open the File menu, hover over Share, and then select Get embed link. 
  4. Copy the URL. 
  5. Return to the tab with the WYSIWYG editor.
  6. On the editor's toolbar, select More Rich and then Insert Video.
  7. Select Embedded Code.
  8. Paste the embed code you copied in Step 4 into the provided text box.
  9. Select Insert to embed the file.

Insert a video from YouTube or Vimeo as a URL

While you are creating content in the WYSIWYG editor:

  1. Open a separate browser tab and go to the video.
  2. Copy the link:  
    • In YouTube, below the video, select Share, and then Copy.
    • In Vimeo, below the video, select Share, and then < > Copy link.
  3. Return to the tab with the WYSIWYG editor.
  4. On the editor's toolbar, select More Rich and then Insert Video.
  5. Select the By URL tab.
  6. Paste the URL you copied in Step 2 into the provided text box.
  7. Select Insert to add the video to your content.

Insert a video directly into the content

Videos inserted directly into content must be in .mp4 file format with a file size no larger than 256 MB. When the file is uploaded it will be scanned for security, and then a video file preview will be generated. 

While you are creating content in the WYSIWYG editor:

  1. On the editor's toolbar, select More Rich and then Upload Video.
  2. Drag and drop a video file into the box, or select the box to browse for the file. 
  3. Once the file has been selected, wait for the file to upload, after which a file preview will be generated. The preview may take several moments to generate. 

Edit videos in the WYSIWYG editor

Video tools

Selecting a video while editing content in the WYSIWYG editor displays a toolbar with the following editing tools:

Action Usage
Igloo_WYSIWYGEditor_ReplaceIconSmall.svg
Replace
 Select to swap the video with another one. Similar to inserting a video, you can reference a source by URL or embedded code.

Remove

 Select to remove the video from your content.
WYSIWYG tools

Move a video within the content

While editing content, move a video to a new spot by dragging and dropping it. The video will be inserted at the spot indicated by the cursor inside the editor.

Add a line break above or below a video

Hover over the top or bottom of a video to reveal a break button. Select this button to add a line break. This option is only available when there is not already a line above or below the video.

Adding a line break above a video.