How to embed HTML (and add video)

Updated Sep 25, 2019

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?

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

Your video service should have an option to copy embed code. This is quite common as many companies need to show videos on their websites.

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

The video below is hosted on YouTube and has been embedded in this ScreenSteps article.

Go to hosting service and find the embed code
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.

  1. Click Share
  2. Click Embed
  3. Choose your video size
  4. 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>

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;
}

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. Click above to choose one of those options, and then follow the instructions.

If you still have questions about video hosting, please email support@screensteps.com.

Which ScreenSteps editor are you using?

The instructions for adding an HTML block vary slightly depending on which editor you use.

Add an HTML block

Click on the + icon
Click Embed HTML and add the embed code

Add an HTML block and paste the embed code in the block. Your video will play in your published article.

Add an HTML block

Click on the + icon.
Select Embed HTML from the menu
Add the HTML/Embed code
Congratulations, you are done!

Still Need Help?

Contact Us