How to Embed HTML (and Add Video to ScreenSteps Articles)

Updated on Nov 30, 2022

Workflows are not supported in your browser.
Please use a recent version of Chrome, Edge, Firefox or Safari to display this page.

When editing an article you can follow these instructions to add HTML to an article. This is also how you would add videos to your ScreenSteps article.

Do you want to add a video to your article?

The end result will be a video playing in a step, like this

The video below is an example. These instructions will show you how to add a video to your article so that it plays inline, like the video below.

Where is the video being hosted?

To add a video to your ScreenSteps article, you must host the video with another service and then embed the video in a ScreenSteps article.

Get the embed code

Go to hosting service and find the embed code

The screenshot below is for YouTube. If you are using Vimeo, Wistia, VidYard, or another service, then the process for copying the embed code will look different.

Go to YouTube.com and find the embed code

This example shows you how to locate the video on YouTube.com. A similar process will be followed for whatever video hosting service you use.

Click Share
Click Embed
Choose your video size
Copy the Embed code and continue on through the instructions to add it to ScreenSteps

You will have to add embed code

You can embed a video that you are hosting on your company intranet, but you will need to customize the code that you use. The following steps will show you what to do.

Use this embed code

You can use the following format to enter video embed code:

Make sure you replace the height and width with the actual height and width of your video file.

<div class="video-responsive">
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Click to copy

Make sure to replace the movie.mp4 with the name of your movie file.

Make sure to replace the type="video/mp4" with the file type your movie actually is.

Add CSS to your ScreenSteps site

You will also need to add CSS to your ScreenSteps template so that the video will display correctly.

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive video {
    left:0;
    top:0;
    height: auto;
    width: 100%;
    position:absolute;
}

Click to copy

See here for how to add CSS to your site.

Hosting a video

Unfortunately, ScreenSteps is not optimized for hosting and playing video, so we recommend NOT uploading video directly to ScreenSteps.

You should upload video to another location such as a video service (e.g. YouTube, Vimeo, Wistia, or VidYard), your own server / company intranet, or a shared drive such as Box / Dropbox.

Once the video is uploaded to that location, you can use the embed code to show the video in a ScreenSteps article. See below for an example of getting the embed code and then click to continue following instructions

If you still have questions about video hosting, please email [email protected].

Go to hosting service and find the embed code

The screenshot below is for YouTube. If you are using Vimeo, Wistia, VidYard, or another service, then the process for copying the embed code will look different.