Skip to main content
Skip table of contents

Embed Streaming within Your HTML Webpage

In this tutorial we will guide you how you can embed streaming within your webpage.

Why embed streaming within your webpage?

Customize your stream link and stream it from your website

Step 1. Select the app which you want to embed with your webpage.

image-20241113-140807.png

Figure 1. Select the App

Step 2. Select a config.

image-20241113-140929.png

Figure 2. Select a Config

Step 3. Copy Streaming iFrame Script.

image-20241113-141036.png

Figure 3. Copy iFrame Script

Step 4. Now open any html editor and create a folder.

image-20241031-044540.png

Figure 4. Create a Folder

Step 5. Create “index.html” file inside the folder.

image-20241031-044645.png

Figure 5. Create index.html File

Step 6. Copy the code below and paste it inside index.html.

CODE
<html>
    <head>
        <title>Demo</title>
    </head>

    <body>
        <div>
           //paste the copied iFrame Script here
        </div>
    </body>
</html>

image-20241031-052411.png

Figure 6. index.html File

Step 7. Now paste the copied iFrame script inside the <div> below.

image-20241031-052459.png

Figure 7. Paste the iFrame Script

Step 8. Open an account in Netlify or Login to Netlify if you have already an account.

Step 9. Go to Build and click on “New site from Git”.

image-20241107-034820.png

Figure 8. Build a New Site

Step 10. Click Try Netlify Drop.

image-20241107-034928.png

Figure 9. Try Netlify Drop

Step 11. Click browse to upload your project.

You can also use Drag and drop method

image-20241107-035032.png

Figure 10. Browse to Host Your Website

Step 12. Select the folder that contains index.html file.

image-20241031-050124.png

Figure 11. Upload the Folder

Step 13. Click Upload.

image-20241107-035217.png

Figure 12. Click Upload

Step 14. Click Open Production Deploy.

image-20241107-035317.png

Figure 13. Open Production Deploy

Step 15. Click Play button.

You can modify the website URL

image-20241107-040217.png

Figure 14. App is Ready to Play From Your Website

image-20241107-040413.png

Figure 15. App is Streaming from Your Website

Step 16. You can customize your site URL.

Click Site Configuration and then select Change site name

image-20241107-040605.png

Figure 16. Customize Website URL

image-20241107-040800.png

Figure 17. Customize Site URL

Step 17. Now you can see the customized URL.

image-20241107-040933.png

Figure 18. App is Streaming from Customized URL


💬 Ask questions and help your peers Community Forum

📄 Need help? Contact Support

 

Facebook | GitHub | LinkedIn | YouTube

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.