How to Embed a Live Stream on Your Website

Embedding a live stream on your website lets viewers watch without leaving your page, keeping engagement on your domain instead of sending everyone to YouTube or Facebook.

There are three main methods: iframe embed, HLS URL with a player library, and direct JavaScript integration. Here's how each works and when to use it.

Method 1: Livepush Embeddable Player (Easiest)

If you're using Livepush, you get an embeddable player URL for every stream.

Step 1: Get Your Player URL

1. Log in to Livepush
2. Open your stream → go to the Player tab
3. Copy the Embed Code (an <iframe> tag) or the Player URL

The embed code looks like:

<iframe
  src="https://player.livepush.io/embed/YOUR_STREAM_ID"
  width="100%"
  height="540"
  frameborder="0"
  allowfullscreen
  allow="autoplay; encrypted-media">
</iframe>

Step 2: Paste into Your Website

Paste the iframe code into any HTML page where you want the player to appear. It works in:

• Raw HTML pages
• WordPress (using HTML block or Text widget)
• Webflow (Embed element)
• Squarespace (Code block)
• Shopify (Custom HTML section)

The player is responsive and fills the container width automatically.

Customizing the Player

In Livepush Player settings, you can configure:

• Logo: upload your logo to appear in the player corner
• Primary color: match your brand
• Autoplay: auto-start when the page loads
• Background poster: image shown when stream is offline
• Access control: password-protect or restrict by domain

Method 2: HLS URL with hls.js

For maximum control, use the raw HLS URL with hls.js, a lightweight JavaScript library that plays HLS in any browser.

Step 1: Get the HLS URL

From the Livepush dashboard, get your HLS URL:

https://hls.livepush.io/live/YOUR_STREAM_ID/index.m3u8

Step 2: Add hls.js to Your Page

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Step 3: Create the Video Element and Player

<video id="live-player" controls width="100%" poster="/your-offline-poster.jpg"></video>

<script>
  const video = document.getElementById('live-player');
  const hlsUrl = 'https://hls.livepush.io/live/YOUR_STREAM_ID/index.m3u8';

  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Native HLS (Safari, iOS)
    video.src = hlsUrl;
    video.addEventListener('loadedmetadata', () => video.play());
  }
</script>

This gives you full control over the player UI, controls, and behavior.

Method 3: YouTube/Facebook Live Iframe

If you're streaming to YouTube or Facebook, you can embed their player directly.

YouTube Live Embed

Get the video ID from your YouTube live stream URL (youtube.com/watch?v=VIDEO_ID), then:

<iframe
  width="100%"
  height="480"
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media"
  allowfullscreen>
</iframe>

Limitation: Shows YouTube branding, recommendations, and related videos. No control over player UI.

Facebook Live Embed

Use the Facebook Video plugin:

<div class="fb-video"
  data-href="https://www.facebook.com/YOUR_PAGE/videos/VIDEO_ID/"
  data-width="100%"
  data-allowfullscreen="true">
</div>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>

Limitation: Requires Facebook SDK, loads extra Facebook scripts, and shows Facebook UI.

Showing an Offline State

When your stream is offline, the player should show something instead of a broken video element.

With the Livepush embed, this is automatic: you can set a custom poster image and offline message in Player settings.

With hls.js, handle the offline state in JavaScript:

hls.on(Hls.Events.ERROR, (event, data) => {
  if (data.fatal) {
    // Show offline message
    document.getElementById('live-player').style.display = 'none';
    document.getElementById('offline-message').style.display = 'block';
  }
});

Mobile Considerations

• Use width="100%" on the video/iframe so it scales on mobile
• Add playsinline attribute to prevent iOS from auto-fullscreening: <video playsinline>
• Test on both iOS Safari (native HLS) and Android Chrome (hls.js)
• Autoplay with sound is blocked on mobile, but muted autoplay is allowed

Embedding on WordPress

The simplest WordPress embed uses the HTML block:

1. Edit your page/post
2. Add a Custom HTML block
3. Paste the Livepush iframe code
4. Save and preview

For a cleaner implementation, add the player to your theme's page.php or use a shortcode plugin.