question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to embed a live stream?

See original GitHub issue

Hi I’ve got the following video that I want to display https://www.youtube.com/embed/live_stream?channel=UCHk3Xtz3k8H1Ms6CtodmawQ

I want to display in that way because it is a live stream and the videoId keeps changing.

Nevertheless if I put

render () {
    return (
      <YouTube
        apiKey={API_KEY}
        videoId='live_stream?channel=UCHk3Xtz3k8H1Ms6CtodmawQ'   // The YouTube video ID
        play             // control playback of video with true/false
        showFullscreenButton
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onError={e => this.setState({ error: e.error })}
        style={{ height: 300 }}
      />
    )
  }

It renders image

What should I do? Best Regards

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
christiansaikicommented, May 21, 2018

Hey @srinusonly I am using this componentDidMount trick to get the videoId

componentDidMount () {
    fetch(`${YOUTUBE_API}`)
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson && responseJson.items[0]) this.setState({ videoId: responseJson.items[0].id.videoId })
      })
      .catch((error) => {
        console.error(error)
      })
  }

where YOUTUBE_API is

const YOUTUBE_API = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=live&type=video&key=${API_KEY}`

and then in render method

  render () {
    const { videoId } = this.state
    return (
      <YouTube
        apiKey={API_KEY}
        videoId={videoId}   // The YouTube video ID
        showFullscreenButton
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onError={e => this.setState({ error: e.error })}
        style={{ height: 300 }}
        />
    )
  }
}
1reaction
HarshitMadhavcommented, Mar 3, 2020

I can confirm that workaround provided by @christiansaiki works in both android and iOS.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Embed Live Streaming Video on Your Website in 2022
Go to your website's admin page and find the page you want to embed your live stream video. Click on “add a section”;...
Read more >
How to embed live streaming video on your website - Restream
Use Restream Studio · Log in to your Restream account and navigate to the dashboard. · Click “Stream with Studio.” · Click the...
Read more >
3 Simple Steps to Embed Live Stream Video to Your Website
1. Switch the stream to unlisted or public. · 2. Navigate to the “Watch page” and click share. · 3. Then from the...
Read more >
How to Embed a Live Stream on your Website - EventLive
Embed your live stream in a Wix Website · On the left side of your screen, press the + sign. · Choose Embed,...
Read more >
How to Live Stream Directly to Your Website - YouTube
Live stream directly to your website with Restream's new embeddable live video player. This new tool empowers you to direct traffic to your ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found