How to Embed Live Streaming Video On Your Website (Easy Guide)
Home Blog How to Embed Live Streaming Video On Your Website (Easy Guide)

How to Embed Live Streaming Video On Your Website (Easy Guide)

How to Embed Live Streaming Video On Your Website

Do you want to embed live streaming videos on your website?

Live streams are a great way to engage your audience for a longer time and build a relationship at the same time.

And by displaying live streams, you can get tons of viewers whenever you go live and keep people engaged on your website.

But showing live streams on your site can be tough – especially if you’re not familiar with coding.

The solution? You can follow this guide, where we show you how to embed live streams on your own website with ease.

We’ll cover these topics in this tutorial:

Let’s get started!

What is the Best Platform for Live Streaming

While there are lots of websites and social platforms that support live streams, 2 of the most popular options are Facebook and YouTube.

YouTube is the biggest platform for video content on the internet, with over 500 hours of videos uploaded each minute, according to our extensive research on social media marketing statistics.

As a result, it’s a great streaming service if you want to reach tons of people at once. Here are a few more benefits of streaming on YouTube:

  • Google will automatically index your livestreams so people can search for them with ease
  • Unlike most video platforms, YouTube supports 4K streaming in case you want to show the highest quality for your livestream
  • There’s no time limit when it comes to YouTube streams, so you can make live videos as long as you want
  • YouTube Live also supports monetization, so you can make money on YouTube directly off your streams
example of youtube live streams

On the other hand, Facebook is the biggest social platform on the internet and supports live video streaming as well.

If you want access to Facebook’s massive user base, you can stream live videos here as well. On top of live streams, you can post regular videos, photos, text, gifs, and more to promote your brand,

Here are a few more reasons why Facebook can be a great place for live videos:

  • Facebook makes it super easy to start a live stream — all it takes is a click of a button
  • Once your Facebook live stream is over, it’s automatically saved to your page or group
  • With Facebook, your live videos are shareable, so you can go viral and reach tons of people who can be your Facebook followers

Aside from these 2, other smaller platforms for live videos include Vimeo and Twitch. With that said, YouTube and Facebook stand out as the best live streaming platforms for your videos so we’ll be focusing on these two for our step-by-step tutorial.

Now let’s go ahead and see the different ways you can embed your live streaming video on your website.

Ways to Embed Live Streams on your Website

When it comes to embedding live streaming videos, there are 2 ways you can do it:

  • Manual Way: Fetch the embed code of the live video, tweak that HTML code according to your needs, and then embed it on your website.
  • Easy Way: Use a WordPress plugin to automatically embed live streaming videos in just a few clicks — no coding needed.

With the first method, it can take more time and effort to embed live streams on your website, especially if you’re regularly making new videos.

example manually embed facebook live

And when you manually add the embed code to your website, you won’t have a support team to help you out in case something goes wrong.

Plus, you can’t customize how the videos look on your website unless you’re familiar with coding. So, your video content might not fit your branding.

For an easier option, you can simply use social media feed plugins to embed live streaming videos with ease.

And the best options that you can try are Smash Balloon plugins.

smash balloon best social media feed plugins

Using Smash Balloon, you can easily keep your visitors engaged with content from the biggest social platforms out there: Facebook, YouTube, Instagram, and Twitter.

As a result, you can embed livestreams from Facebook as well as YouTube in just a few simple clicks. After that, visitors can use the live streaming video player on your website to check out the live streams.

You can then promote your livestreams and turn your website visitors into views, likes, and subscribers in no time.

example of youtube video livestreams

Unlike most plugins, Smash Balloon doesn’t use iFrames and will actually embed social media posts on your website. This is great for your SEO since search engines can read your social media content.

On top of live streaming videos, you can also embed different types of social media feeds on your website, including:

All you have to do is follow the 3-step guided flow, and it will take you through the whole process of creating, customizing, and embedding social feeds on your website.

Plus, you can use a simple live feed editor to customize how your social media feeds look on your website.

The best part? Smash Balloon comes with a team of skilled experts who are always ready to lend you a hand whenever you need it.

With all these amazing features, Smash Balloon is easily the best social media feed solution in the market, with over 1.75 million active users!

And that user base also includes some of the biggest brands in the world. As you can see, your brand will be in good company here.

Ready to embed social media content with ease? Get Smash Balloon for your site today!

With that, let’s get started and see how you can use Smash Balloon to embed live stream videos.

How To Embed Live Streaming Video On Your Website

In this step-by-step guide, we’ll show you how to embed live streaming videos from Facebook and YouTube on your website.

Let’s get started!

How to Embed YouTube Live Stream in WordPress

To get started, get your copy of the YouTube Feed Pro plugin from here. Then, just install and activate this plugin on your website.

If you want a quick refresher on how to do this, check out this tutorial on how to install WordPress plugins on your website.

After that, navigate to the YouTube Feed » All Feeds menu from your admin dashboard and then click on Add New.

add new youtube feed.

Next, the plugin will ask you to choose the type of YouTube content you want to embed. From here, you can choose to embed a YouTube channel, playlist, search results, and much more.

To continue, select the Live Streams option and then click on Next.

pick live streams feed type youtube feed pro

With that, you’ve created a new YouTube feed that you can use to embed live streams on your website.

In the next step, you can connect this feed to your YouTube account.

Connecting Your Feed to YouTube

If you connect this feed to YouTube, it can start showing live streaming videos on your WordPress site.

The easiest way to do that is by using adding your YouTube API Key.

Want to get your API key? Just follow this step-by-step guide for creating your YouTube API Key. Once you have the key, just copy it and return to your website.

After that, paste the YouTube API key into the popup and then click on the Add button.

add api key youtube

Now you can choose the live streaming videos that you want to embed.

First, use your web browser to open https://www.youtube.com and then open the YouTube channel with the live video.

After that, look for “/channel/” or “/user/” in the URL and then copy the code at the end.

copy your channel id youtube

Once you do that, return to your website once again and then paste the code in the Add Channel ID for Livestream field.

Finally, click on the Next button to continue.

add your youtube channel as the source

Just like that, you’ve connected your YouTube feed to a source so that it can display live videos on your site.

Customizing Your YouTube Live Feed

To help you easily customize your live feed, the plugin gives you 8 pre-built templates with unique designs:

  • Default
  • Carousel
  • Cards
  • List
  • Gallery
  • Latest video
  • Showcase carousel
  • Widget

To continue, you can simply select the feed template that you prefer and then click on Next.

pick a feed template youtube feed pro

Next, the plugin will open your YouTube feed in the live feed editor so you can customize it in-depth.

On the left, you can find the customization panel that you can use to change your feed’s layout, color scheme, header design, number of posts, button designs, and much more.

live feed editor add youtube live streaming video to website

When you use these options, you can track how your YouTube livestreams will look on your website.

To get started, click on the Feed Layout option from the left panel.

open feed layout options live streaming youtube video

With YouTube Feed Pro, you can show your live streaming videos in 4 different layouts: Grid, Gallery, List, and Carousel.

Let’s take a look at them below:

layout options youtube live streaming video

Using the Grid layout, you can show all the live streaming videos in neat rows and columns on your website.

That way, you can show lots of past live streams and get more views.

grid layout youtube feed example

Next, you have the Gallery layout, which will show a single large video with several thumbnails under it.

As a result, you can put the focus on your current live stream and boost your views.

gallery layout youtube feed pro

With the List layout, you can show YouTube videos in a single column. Your videos will then be clearly visible on your website.

list layout for youtube

Finally, you can turn your videos into a carousel slideshow by picking the Carousel layout.

It’s a great way to make your website more interactive and engage your visitors.

carousel layout youtube feed pro

Select the feed layout that you want to use and then click on Save.

To continue editing your live YouTube feed, click on the small Customize button at the top.

return to customization options youtube feed pro

After that, you can continue customizing your feed using the panel on the left.

To change how your feed header looks, click on the Header option.

open header options for youtube feed pro

You can Enable or Disable your YouTube feed header using the toggle button at the top.

Below that, you can find the Header Style option with 2 options to choose from:

  • Standard: Show information like the channel name, description, and icon at the top.
  • Text: Enter a sentence and use it as the header
live feed editor choose your header

Once you select your header style, click on Save to confirm your changes.

As you can see, it’s super easy to customize your YouTube feed with this plugin. Now you can use the remaining customization options to change your feed size, color scheme, template, button design, and much more.

After you’re done with the customization, remember to click on Save once again.

Now your YouTube feed with live streaming videos is ready to be embedded. You can just go to the next step to see how you can do that.

Embedding Your YouTube Live Feed

To embed your new YouTube feed with ease, you can use the live feed editor — no need to touch a single line of code.

First, click on the Embed button in the top right corner.

youtube embed your live streaming video to website

Doing that will open a new popup that you can use to choose the location of your YouTube feed. There are 2 ways you can do this:

  • Embed YouTube feed on a WordPress page
  • Embed YouTube feed on a WordPress sidebar or footer

To embed your live YouTube videos on a page, just click on the Add to a Page button.

embed to a page youtube feed

Next, you can see a list of all the WordPress pages on your website on the popup.

To continue, select the page where you want to embed the live videos and then click on Add.

select your page wordpress

Doing that will open the page in the WordPress editor. Here, add a new content block by clicking on the plus (+) icon.

add new wordpress block

Now use the search bar to look for “youtube feed” before clicking on the Feeds for YouTube block from the options below.

add youtube feed block to wordpress

Finally, click on the Update button, and your live streaming video will be online for your visitors to see.

If you open your website, you can see the videos on your page like this:

example of livestream on your website

You can also embed your live streaming YouTube videos on your sidebar or footer as a YouTube widget.

Like before, you can do that with ease using the live feed editor.

First, open the YouTube Feed » All Feeds menu from your WordPress dashboard to see all of your YouTube feeds listed.

Then, just click on the YouTube feed that you want to embed.

open feed in the live feed editor

Clicking on that will open the YouTube feed in the live feed editor once again.

Now, use the Embed button at the top to start embedding this feed.

youtube embed your live streaming video to website

From the options on the popup, click on Add to a Widget.

The YouTube Feed Pro plugin will then send you to your website’s widgets page.

embed to a widget youtube feed pro

Now, you can click on the Sidebar or Footer depending on where you want your YouTube live feed.

For this tutorial, we’ll use the Sidebar option here.

open sidebar panel

Now, you can add a new widget by clicking on the plus (+) icon at the bottom.

To embed your YouTube feed, select the Feeds for YouTube widget from the options.

add youtube widget to your site

Finally, confirm your changes by clicking on the Update button at the top.

With that, you can open your website to see the YouTube feed with live videos, like this:

example of youtube livestream widget

Now you know how to embed YouTube live streams on your website with ease. As a result, you can boost your view, engage your visitors, and grow your channel with ease.

Let’s take a look at the simplest way to embed Facebook live streams.

How to Embed Facebook Live Stream in WordPress

Like with YouTube, you can easily embed your live broadcast from Facebook by following the simple steps below.

First, go and get your copy of the Facebook Feed Pro plugin and then install it on your website.

Not sure how to do that? Check out this guide on how to install a WordPress plugin here.

After the plugin is ready, open the Facebook Feed » All Feeds menu from your WordPress dashboard and then click on the Add New button.

create a new facebook feed

Next, you can choose the type of Facebook feed that you want to embed.

On top of live streaming videos, you can use this plugin to embed Facebook pages, photo galleries, events calendars, reviews, group posts, and much more.

For now, select the Videos option here and then click on Next.

pick videos feed type for facebook

Just like that, you now have a Facebook feed on your WordPress website. In the next step, you can connect this feed to your own Facebook account.

Connecting Your Facebook Account

By connecting your Facebook account, your new feed can embed content from Facebook on your website.

Click on the Add New button here to get started.

add source facebook feed pro

Next, the plugin will ask you to choose between 2 options for your source: Facebook page or a group.

Just choose the option that has the live streams that you and to embed, and then click on Connect to Facebook.

connect to facebook using facebook feed pro

Next, the plugin will open Facebook, where you can confirm which page or group you want to use as the source.

Just select your page or group on the popup and then click on Next.

select the facebook pages

After that, Facebook Feed Pro will ask for read-only access to your account. The plugin will use this access to read content on Facebook, but it won’t be able to make any changes at all.

Like all the other Smash Balloon plugins, Facebook Feed Pro is completely safe.

To confirm the read-only access, click on the Done button here.

allow read only access to facebook feed pro

Doing that will bring you back to your WordPress website once again. Here, you can save this page or group as a source.

That way, you can easily select it whenever you make a new Facebook feed.

You can just click on the Add button to continue.

select facebook group page

Finally, click on Next to finish connecting this feed to your Facebook account.

With that, your Facebook feed is ready to display live streams on your website.

select source facebook feed pro

As you can see, Facebook Feed Pro makes it super easy to create feed widgets and connect them to Facebook.

Before that, you can go to the next step and customize how your Facebook video feed looks.

Customizing Your Facebook Feed Widget

For easy customization, you can just select a pre-built template and import its design for your Facebook feed.

You get 7 feed templates that you can choose from:

  • Default
  • Simple masonry
  • Widget
  • Large grid
  • Large album
  • Showcase carousel
  • Simple carousel

You can choose the feed template that you prefer and then click on Next to continue.

select your facebook feed template

Next, you can choose whether you want to embed all the Facebook live videos or just display the videos from a specific playlist.

Choose the option that you prefer and then click on Next

choose video feed type facebook

For this tutorial, we’ll go with the Show all Videos option.

Facebook Feed Pro will then send you to the live feed editor so you can easily set the design of your live video feed.

Using the options here, you can change your layout, feed size, colors, header, post style, load more button, and much more.

Towards the right, you get a real-time preview of your Facebook feed to track your customization with ease.

live feed editor for facebook feed pro video

Ready to start the customization?

To get started, first, click on the Color Scheme option on the left.

color scheme option for facebook feed pro

With Facebook Feed Pro, you have 4 easy color schemes that you can use for your feed:

  • Inherit From Theme: Automatically copy your website’s colors
  • Light: Display a light background along with a dark font
  • Dark: Show a dark background and lighter font color
  • Custom: Pick all the colors of the feed yourself
pick your color scheme facebook feed pro

After you select your color scheme, remember to click on Save to keep your changes.

Next, you can return to the main customization menu by clicking on the Customize button at the top.

customize button facebook feed live stream

After that, you can use the editor to change the header that appears at the top of your Facebook video feed.

Click on the Header option on the left to get started.

header option for facebook feed pro live stream

Now look for the Header Type option, where you have 2 types of headers to choose from:

  • Visual: Show your cover photo, page or group icon, number of likes, and more
  • Text: Write a line of text and use it as the heading for your feed
header type facebook feed pro

Like before, click on the Save button once you’re happy with the design of your header.

Using the rest of the customization options, you can set your feed size, number of videos, feed layout, like box design, and much more.

Once you’re done with the customization, click on Save to keep the changes.

Finally, you can embed this Facebook feed on your website in the next step.

Embedding Your Facebook Live Feed

Just like your YouTube feed, you can start embedding this Facebook feed directly from the live customizer.

First, look for the Embed button in the top right corner and then click on it.

embed your live streaming video wordpress

Next, you can use the popup to choose where you want to embed the Facebook feed. There are 2 ways you can do this:

  • Embed Facebook live feed on a page
  • Embed Facebook live feed on the sidebar or footer

Want to show live streaming videos on a WordPress page? Then click on the Add to a Page option here.

add your live streaming video to website page

After that, you can see all of the pages on your website listed on the popup.

To continue, select the page where you want to embed the Facebook videos and then click on Add.

pick wordpress page facebook live

Once you do that, the plugin will send you to that page. Here, you can use the WordPress editor to easily embed your Facebook live videos.

Here, add a new content block by clicking on the plus icon (+) and then select Custom Facebook Feed.

Finally, save your changes by clicking on Update button, and your Facebook video feed will be live on your website.

After that, you can open your web page and check out your Facebook live streams with ease.

example facebook live streaming video

What’s more, you can also embed your Facebook feed on your sidebar or footer areas.

To learn how, you can check out this tutorial on how to embed Facebook widgets in WordPress.

embed facebook live stream on website sidebar

And there you go!

Now you know the easiest way to embed live streaming videos on your website. As a result, you can keep your website visitors engaged, build a relationship, and convert them into customers.

Using Smash Balloon plugins, you can create, customize, and embed social feeds in just a few easy clicks – no need to touch a single line of code.

Ready to embed live streams and more?

Grab the All Access Bundle to get Smash Balloon plugins for the biggest social media platforms: Facebook, YouTube, Instagram, and Twitter.

If you want to get more out of Facebook and YouTube, you can follow our guide on how to improve social media marketing.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

Comments 4

  1. Larry 1 year ago

    When a live feed is embedded in WordPress using Smash Balloons for FB, will a new video feed show up automatically in the website when a new live stream is started in FB??

    Reply
    1. Manuel Escobar 1 year ago

      Hi Larry,

      In this case, new videos are not displayed in real-time on your feed; the plugin will check for new posts/videos in a specific interval, you can adjust this interval by changing the caching setting on the plugin, so it can check for new posts faster. To do so, navigate to Facebook feed > Settings > Feeds > Caching. You can reduce the caching time to every 30 minutes, then save the changes. 

      I hope this helps! Please let me know if you have any questions.

      Thanks! 🙂

      Reply
  2. Makis tzolis 1 year ago

    Doesn’t working on mobile.if I click auf live then picture freezes and showing nothing.Why is that?

    Reply
    1. Manuel Escobar 1 year ago

      Hey Makis,

      This could be a conflict with another plugin on your site that is affecting the feed; kindly send us a support request using the form on our website here, including the System Info.

      To obtain this information, follow the steps on this page.

      We ask you to use our form, as the System Info contains other website information and the Access Token for your connection, which we do not suggest posting here.

      Thanks! 🙂

      Reply

Leave a Reply to Larry Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.