How to Embed Live Streaming Video on Your Website [2022 Update]
Table of Contents
Thanks to constant developments in video creation and streaming technology, creating and sharing videos is now easier than ever. Recent years have brought an increase in the popularity of video-sharing across hundreds of different platforms.
This means that more people are sharing live and on-demand videos regularly. Knowing how to broadcast live and embed streaming video on your website is also becoming increasingly important for all kinds of broadcasters.
The same goes for on-demand video content. Whether it is for your business website or your blog, knowing how to setup live streaming video on your website is key to producing successful virtual events, increasing website traffic, or simply gaining exposure for the content.
We’ve put this guide together to give you some insight as to what video embedding is and how you can embed videos to integrate live video streaming on your website with Dacast.
*This post reflects the most up-to-date information on how to embed a live streaming video on your website in June 2022.
Table of Contents
- What is Video Embedding?
- Why Embed Videos on Your Site?
- How Does Video Embedding Work?
- How to Embed Live Streaming Video on Your Website
- How to Embed Live Videos on Popular Website Builders
- How to Embed a Video Player on Social Media
- Embedding Video for Mobile Devices and Desktops
What is Video Embedding?
Video embedding is the process of adding a live stream or a video player to your website using an online video platform. For many website building or social media platforms, it is as simple as copy and pasting a link.
You can use free tools like Youtube, but these come with limitations for embedding live video content on your website.
Using professional video hosting platforms gives you much more control over your content. You own the content so you can white-label (or remove the host’s branding). You also don’t have to worry about following any of Youtube’s strict guidelines or about your content being deleted without your permission.
Video embedding is fairly easy as long as your website design is compatible with the type of streaming you want to set up. With video embedding, you can easily embed live streaming videos on your website.
Why Embed Videos on Your Site?
Here are a few statistics that exemplify why embedding a video to your site can add value to your business:
- Video is used for marketing in 71% of B2B businesses and 61% of B2C businesses
- Video content is 50x more likely to rank than text posts
- The video streaming market will grow to $223.98 billion by 2028
- 87% of marketers that use video report that using video content has boosted the traffic to their website
- 55% of online users watch video content every day
- Websites are the #1 channel for video distribution (as opposed to social media and other similar platforms)
- Multistreaming is big in 2022, with many multistream platforms already available to embed streams
Want to learn more about the state of the online video streaming industry? Check out our streaming statistics post to review online streaming trends in 2022.
How Does Video Embedding Work?
Video embedding works by adding a snippet of code, which is referred to as an “embed code,” from your video hosting platform to the code of your website. It allows you to integrate and set up live streaming video on your website.
The JS embed code is the default embed code for Dacast, and it supports the most features. This includes being responsive if the elements are designed inside is a different size and working with the referrer restriction feature.
The iFrame embed code is the most universally compatible embed code. The caveat is that some features do not 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 are using iFrames within iFrames. Additionally, the URL-based referrer restriction feature does not work with the iframe embed.
How to Embed Live Streaming Video on Your Website
It is not difficult to embed live streaming video on your website, but it does require a few different tools and a little bit of know-how.
Let’s take a look at how you can embed a video player on your website in 5 simple steps. These steps are the same for embedding live video or video-on-demand.
1. Choose a Live Streaming Platform
The first step in embedding a live video on your website is investing in a live streaming platform. This tool is used to manage and host all of your video content. Many of these platforms also support monetization, security, and more.
Some of the top live streaming platforms include:
Again, YouTube and Vimeo are two free alternatives. These options are very limited in terms of features and capabilities, but they can be helpful for broadcasters with limited budgets.
For more information on choosing a platform to host your stream, please check out our live streaming platform comparison post.
2. Create a Live Channel
Once you’ve chosen an OVP, it is time to create a live channel. To do so in Dacast, click the purple “Add +” button in the menu on the left. Select “Live Stream,” and when the window pops up, add a title and select “Standard” as your stream type. Click “Create.”
3. Generate an Embed Code
Platforms like Dacast give you the option to manually embed streaming content on your website by providing the embed codes that you need to make this possible. Dacast makes it exceptionally easy for users to create embedded players on their sites and broadcast live video streams.
STEP 1: To get started, log in to your Dacast account. Find the video you want to embed and click the “Edit” button:
STEP 2: Navigate to the “Sharing” section under the “General” tab and copy the “Embed Code”:
The JS embed code is also a requirement in order for the URL referral restriction feature to work (which restricts content based on the websites allowed to host it). That said, the iframe embed code is more compatible with and/or required for some frameworks, including WordPress and WIX.
STEP 3: Once you have selected your embed code type, the last thing you have to do is insert it into your website. It will not look the same for everybody, but assuming you have access to edit at the HTML level it will look something like this:
If you go to the “General” tab and navigate to “Sharing,” you will also see a “Share Link” option.
This is not an embed code but a link that will allow you to share directly with viewers or to your social networks.
If you have any questions about video embed or need help with this Dacast feature, feel free to contact us directly.
4. Paste the Embed Code
Find the place on your site that you’d like to embed the video player. Open the HTML editor, and paste the embed code that you copied from your OVP.
Preview the changes to make sure the code is working properly.
By either using domain restrictions or signed embed codes, you can also share videos privately to ensure that your videos are only accessible on websites you own. This feature is available with many professional video CMS platforms, protecting your content even when you use a third-party platform.
5. Save Your Changes
Save the changes, and publish the page or post that you’ve edited. Again, test out the live site to make sure that your embedded video player has been properly set up.
It is a good idea to test run live streams before your broadcast is slated to start.
Now you know how to use Dacast to embed live streaming video directly on your website.
How to Embed Streaming Video on Popular Website Builders
You can embed videos on your website quite easily if you are using a drag-and-drop website builder. Embedding videos on platforms like Wix, Weebly, WordPress, or Yola only takes a few steps.
Here are step-by-step instructions on how to embed live streaming video on popular website-building platforms.
Wix is a website building platform that is used by many people who take a DIY approach to creating their website.
Let’s talk about how to embed a live streaming video on Wix. You can embed a video on your site with just a few simple steps.
- Click the Wix App Market icon on the left side of the editor
- In the app search, type “HTML embed”
- Click “Add to Site”
- Click on the HTML app
- From the pop-up menu, click “Settings”
- Under “Mode” choose “HTML Code”
- Under “HTML/Embed Code,” paste the code that you generated on Dacast
- Click “Update”
Take a look at the published site to make sure the Wix livestream looks how it is supposed to. That is how you stream live video to your website if you use Wix.
To embed on Weebly, all you need is the embed code for the content you want to post onto the site. The Dacast iFrame embed code is ideal. Copy it to your clipboard.
Once you have copied the embed code from Dacast. Drag and drop an “Embed Code” element to the place where you’d like your video to be. Click inside the Embed Code space and paste your code.
If the video doesn’t show up in the editor, don’t worry. Try to hit publish, and the Weebly video player should show up for you.
That is how you live stream on our website using Weebly.
WordPress has recently updated its platform, so embedding a video is as easy as ever.
Here’s what you’ve got to do:
- Copy your embed code from Dacast
- Open the page or post where you want to add the video
- Click the plus sign in the top left corner
- Search for “Video” in the element menu
- Drag and drop the video element where you’d like the video to be
- Click the three dots at the top of the element and click “Edit as HTML”
- Paste your embed code
- Click “Update”
In order to embed a live streaming video on WordPress’s older version, you would need to switch from “Visual Editor” to “HTML Editor” and paste the embed code.
That is all you need to know about how to embed live streams on a WordPress website.
Shopify is a popular option for merchants wanting to provide a live shopping experience for viewers.
To embed streaming videos on Shopify for a live shopping experience, follow these steps:
- Copy your embed code from Dacast
- Open the page or post where you want to add the live stream
- Click the camera sign
- Paste your embed code from Dacast
- Click “save”
Make sure to click “view page” to double-check the embedded video player is working. If you run a Shopify website, that is all you need to do to embed live video on your site.
On Yola, you can add videos to your website from other video-sharing sites. With your Dacast embed code, follow these steps.
- Copy the code provided.
- Go to site builder, then click “Widget”
- Select “Popular”
- Drag and drop the “HTML code” widget onto your page
- Paste your code in the HTML editor
- Click “Save”
It’s always a good idea to preview the published page to make sure everything will look okay for your viewers. That is all you need to do in order to know how to go live on Yola website with your content.
6. Google Sites
Google Sites is part of the Google app tool suite. It’s a free service that allows you to create your own website. The service was created to allow groups of individuals to create and edit a website together from different locations.
To embed on your Google Sites page, follow these steps:
- Copy the Dacast embed code for the video
- Locate the page where you want to embed the video
- Click “Edit Page”
- Place your cursor where you want the video
- Go to “Insert Menus”
- Click on “More Gadgets”
- Now select “Featured” and then find the “Embed Gadget”
- Once you’ve selected the “Embed Gadget,” paste the embed code
- Click “OK” to save your page
That’s all you’ve got to do. Now, you’ll have the video embedded straight onto your Google Sites website for viewers to see.
Squarespace is known for being a robust platform to build professional websites with no coding experience.
Next, let’s talk about how to embed a video in Squarespace. Squarespace is a bit limited as far as the streaming platforms you can use on their cheaper plans. Embedding a Youtube live stream on Squarespace is a lot easier, but as mentioned, it has its limitations.
To use Dacast to embed a live stream on Squarespace, you’ll need to upgrade to a Business and Commerce plan.
Here are the step-by-step instructions to embed a live video in Squarespace using a Dacast embed code.
- Click edit,
- Click the + sign in the section you want to embed the live stream.
- Click </>code
- Make sure it is set to HTML
- Delete the text ” <p>Hello, World!</p>”
- Copy your embed code from Dacast
- Paste the code
- Double-check the HTML code for live streaming your video was setup correctly
As far as how to embed a Youtube video on Squarespace, follow these steps:
- Click edit
- Click the + sign
- Click Video
- The default option is to add a URL, but to the right of that option you’ll see </> and that’s what you want to click.
- Find your Youtube live stream embed code under the “manage” tab.
- Paste the code and save.
Again, it’s never a bad idea to make sure everything is set up correctly.
That is what you need to do in order to embed live streaming video on Squarespace.
Embedded Live Streaming Video Examples
Here are a few organizations that are embedding live streaming videos directly on their website.
1. Sports Live Streaming
Pittsfield TV is a television station made for their local community. They’re a great example of how to livestream events on your website because on top of streaming sports, they also have other channels for education and news live streaming.
2. Music Live Streaming
TV-Polmusic, headquartered in New Jersey, highlights Polish music artists. They have an embedded video player that streams music videos live to a global audience.
3. Live Lectures Streaming
Gresham college is a college located in London that doesn’t enroll students but instead offers their lectures free to the public. They now embed live streams of their lectures directly on their website.
How to Embed a Video Player on Social Media
Whether you want to use social media platforms like Facebook for live streaming sports or simply to host a live webinar training for your business, the ability to embed live stream content onto social media is vital in today’s world.
With the likes of Facebook and Twitter, to name only two, people both watch and stream videos that can reach broad audiences. Despite its live streaming limitations, social media is considered a tried-and-true way to gain viewers and grow a following for your broadcasts.
You can share one of these identical embed codes on Facebook and Twitter in order to give access to your live broadcast or video-on-demand. You can locate this code in the “PUBLISH SETTINGS” section of your video content.
Please note that Facebook has been restricting its option to live stream directly on the Facebook platform. Therefore, if you want to live stream on the Facebook platform, please check out this tutorial for information on working with all encoders supporting multi-destination streaming.
Embedding Live Stream Video for Mobile Devices and Desktops
With Dacast and most other video streaming platforms, broadcasters don’t have to worry about learning how to write the correct embed code because the software generates a code for you, making embedding live video easy.
You can copy and paste the iFrame or JS embed code directly into the HTML of your website. This method works well for both mobile and desktop sites. This is definitely a perk because watching videos on mobile devices has a rocky history.
For many years, Adobe’s Flash Media Player was the standard for playing videos. This trend shifted with the advent of smartphones, specifically the iPhone, in 2007. Apple’s iOS operating system has never supported—and likely will never support— Flash technology.
Steve Jobs released a public statement about the technical flaws of Flash Media Player. He noted these flaws as the reason why he didn’t use Flash for Apple’s iOS. This announcement created controversy and heavy speculation. There were many theories about Jobs’s motivations. However, shortly thereafter, Apple launched the HTTP Live Streaming Protocol to coincide with the debut of the iPhone 3.
Flash has been on the decline ever since, especially for mobile operating systems. A few years later, Android followed suit by ditching Adobe Flash, as well. As a result, Dacast and other live streaming platforms now integrate HTML5 into our embed codes. This feature helps you to create embedded players with compatibility across most devices.
How to Improve an Embedded Live Video
After following all the steps to correctly embed a live streaming video on your website, the last thing you want is a lagging video with shaky audio. To improve the video quality of your live stream, you should know about encoders.
An encoder, among many benefits, makes your videos look and sound more professional. It also stabilizes streaming when there’s an unreliable internet connection.
There are two types of encoders available: hardware and software. Whether you use a software or hardware encoder depends on your brand’s goals.
Hardware encoders are generally more costly than software encoders, but are known for their speed. Besides price, another advantage of software encoders is that you get instant access to software updates, whereas updating physical hardware is a lot harder.
If you’re just getting started with encoders, the open-source encoder OBS Studio is a good option that is known for its simplicity.
It’s fairly simple to embed live video on your website, whether you’re tech-savvy or brand new to live streaming technology.
Here at Dacast, we provide embed codes that are easy to copy and paste into your website’s editing platform. Most online website creators will have unique ways of embedding a live video onto your website, but if you follow the instructions we’ve provided, it is easy to figure out.
Now that you’ve learned about how to use Dacast’s streaming solution for embedding live stream and on-demand video content onto your website and social media pages, it’s time to show off your content.
When you use Dacast to host your video content, generating embed codes, and adding your videos to your site will be a breeze.
Interested in giving Dacast a try? Why not take advantage of our free 14-day trial (no credit card required).
Stay up to date with our latest features and product releases