How to Embed an HLS Stream

Once you’ve set up your online video platform, it’s time to upload your video content. Each platform is unique in terms of how the on-demand video upload process works. On Mslive, for example, you can upload individual videos or bulk upload.

On the other hand, if you want to stream live, you’ll need to create a live channel before you can move on to step 3. Here’s how you can do that using Mslive:

1. On the left menu, find and click the “Add +” button.
2. Select “Live Stream” from the menu.
3. A window will pop up. When it does, add a title and select “Standard” as your stream type.
4. Click “Create.”

Follow the above steps to create a live channel to host your live stream successfully. You’re now ready for step 3.

At this stage, you’ll want to set up your sources. This will likely require setting up your encoder and connecting sources through there. If you don’t have an encoder yet, we highly recommend downloading a free version of OBS for Mslive. It’s easy to set up and get started.

Again, we used Mslive as an example in this step, but the process can vary from platform to platform.

3. Choose an Embed Code

Now it’s time to choose an embed code. There are several types of embed codes that are suitable for different use cases.

Mslive offers two embed code options for live streaming: JS and iframe. Both work for playback on your website or app via desktop and mobile devices as long as the video file supports it. 

The JS embed code is the default embed code for Mslive, and it supports most features. This includes being responsive if the elements are designed in different sizes and working with the referrer restriction feature.

The iFrame is the most universally compatible embed code. The caveat is that some features don’t work with it. 

This embed code is not responsive, which means it’s a fixed size. The full-screen feature is also sometimes removed. This usually happens only if you’re using iframes within iframes. 

The URL-based referrer restriction feature doesn’t work with the iframe embed. This is why Mslive chooses to use the JS code as its default.

4. Access Your Website Code

Next, you will need to locate the spot on your website builder that gives you access to the site’s code.

Generally, there’s a block editing mode that allows you to drag and drop elements, and a text editor mode gives you access to the site’s HTML. For this step, you need to find the HTML editor.

So you can see just how easy it can be, we’ll walk you through this step using WordPress, one of the more popular website builders.

Here’s what the process of accessing your website code on WordPress will look like:

1. Open the page or post where you want to add the video
2. There will be a plus sign in the top left corner; click it
3. Search for the word “Video” in the element menu
4. Drag and drop the video element onto the part of the page or post where you’d like the video to be
5. Click the three dots (…) at the top of the video element and click “Edit as HTML.”

If for whatever reason, you still have an older version of WordPress, you may need to switch from “Visual Editor” to “HTML Editor.” It’s unlikely that this will be the case.

If you’re using a platform other than WordPress, please refer to our dedicated guide on embedding a video player on different website builders. It provides specific instructions for how to open the HTML editor on Weebly, Wix, Google Sites, Shopify, Squarespace, GoDaddy, Zyro, and Yola.

5. Insert the Embed Code

Remember that embed code you copied in step 3? Paste that into the HTML of your website via the text editor.

So, continuing on the WordPress example we introduced in the previous step (Step 4): After clicking on the dots at the top of the video element and clicking “Edit as HTML,” you’ll then:

1. Paste your embed code
2. Preview
3. Click “Update”

It’s that easy.

It’s important to highlight that once you paste the embed code snippet into your site’s code, you should preview it to make sure that it looks the way you want it to.

Once you’re happy with the preview, click “Save,” “Publish,” or “Update” to save your changes. Review the changes on the live site to make sure that everything turned out the way you need it to.

Pro-tip: Be sure to review it on different devices such as mobile, tablet, and laptop. Sometimes it may look perfect on one device and clunky on another.