Webstudio

Log inLog into community

Join the Webstudio community

Updated last month

permanent youtube livestream embed not working with youtube component!

permanent youtube livestream embed not working with youtube component!

At a glance

The post discusses embedding YouTube live streams using the https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID URL, but community members found that it doesn't work consistently. They explored alternative methods, such as using the permanent live URL https://www.youtube.com/CHANNEL_ID or @handle/live, but these also didn't work within the YouTube component. The community members shared code snippets and discussed potential workarounds, including using the YouTube API or web scraping, but noted that the WebStudio platform doesn't currently support multiple API calls.

The comments suggest that the ability to embed a live stream as a channel, where the currently streaming video is shown, would be a useful feature. One community member provided a working HTML code example using the channel ID, but noted that it's not possible to merge a live stream embed and a playlist embed into a single iframe. The WebStudio team acknowledged the issue and indicated that support for embedding a channel as a playlist will be released soon.

Useful resources

JJoqniX︲🎋🌟🌠

·

hi based on this
https://stackoverflow.com/questions/39275889/how-to-embed-new-youtubes-live-video-permanent-url

it seems to be possible!
so - https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID

but when putting this link in youtube component's url field it doesn't work!

will it be possible to add this in the future?

the downside to this, if a channel is not live, it shows an error image. the default - this video is unavailable image.

or is there any other ways to dynamically update the livestream video id ( i know its possibile via youtube api/ webscraping but webstudio doesnt allow multiple api calls yet so it is hard. )

O

J

45 comments

is it not workign during livestream or at all?

JJoqniX︲🎋🌟🌠

yea it doesn't work. if i use it during a livestream.

I was about to write that I see the same thing in webstudio on this link as in the browser https://www.youtube.com/embed/live_stream?channel=UCSJ4gkVC6NrvII8umztf0Ow

JJoqniX︲🎋🌟🌠

it seemed to work before. let me try a different channel i used the lofi girl radio livestream

https://www.youtube.com/live/uXNU0XgGZhs?si=JwSu4tobd5XtcOnB

first thing I found on yt works

JJoqniX︲🎋🌟🌠

so this worked. in browser

JJoqniX︲🎋🌟🌠

https://www.youtube.com/embed/live_stream?channel=UCjk2nKmHzgH5Xy-C5qYRd5A

JJoqniX︲🎋🌟🌠

i dont get why some works and some doesnt?

JJoqniX︲🎋🌟🌠

maybe it might be better to use the permanent live url of youtube
since the live embed url can be inconsistent sometimes?

https://www.youtube.com/CHANNEL_ID or @handle/live

but yea it doesnt work within youtube component yet

pretty clear that my link is different

my link works within youtube component

and its showing alive streaming video

JJoqniX︲🎋🌟🌠

that's a livestream , so hence a video. this usually works yes. i was talking about having a way to permanently show a livestream of a channel on website.

so a user doesnt need to actively input a video id for cases like a livestream etc.

since both https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID &
https://www.youtube.com/CHANNEL_ID or @handle/live works via html embed,
it would be good if it would work within the youtube component as well.

this url works in yt component https://www.youtube.com/live/uXNU0XgGZhs?si=JwSu4tobd5XtcOnB

whats not permanent about it?

you mean you want to embed livestream as a channel

so whatever video is currently streaming will be shown

not a one specific video

JJoqniX︲🎋🌟🌠

yea that's what i wanted

JJoqniX︲🎋🌟🌠

also as a alternative workaround i tried using this method i sent on another thread - https://discord.com/channels/955905230107738152/1309794449429106710/1332401742150631454

but i'm seeing a bug where in webstudio editor it shows the video. but on live site it doesnt? idk why.

JJoqniX︲🎋🌟🌠

and if this will be possible~ then users can use this alternative method for showing user uploads as a playlist.
so if someone watches from the live site. they get to view other videos as well,
but i dont know if youtube embed player has a limitaiton on this? for a livestream embed but i can see potential on this.

got a code that works with channel id and html embed?

I want to see the url

but give me full code pls

JJoqniX︲🎋🌟🌠

okie

JJoqniX︲🎋🌟🌠

i used chatgpt so this works!

Plain Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed YouTube Live Stream and Playlist</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
            margin: 20px;
            flex-wrap: wrap;
        }
        iframe {
            border: none;
        }
    </style>
</head>
<body>
    <h1>YouTube Embed: Live Stream and Playlist</h1>
    <div class="container">
        <!-- Embed Permanent Live Stream -->
        <iframe
            src="https://www.youtube.com/embed/live_stream?channel=UCjk2nKmHzgH5Xy-C5qYRd5A"
            width="560"
            height="315"
            allow="autoplay; encrypted-media"
            allowfullscreen>
        </iframe>

        <!-- Embed Playlist -->
        <iframe
            src="https://youtube.com/embed?listType=playlist&list=UUjk2nKmHzgH5Xy-C5qYRd5A"
            width="560"
            height="315"
            allow="autoplay; encrypted-media"
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

JJoqniX︲🎋🌟🌠

yea this works! the embed is a livestream and it worked with the playlist as well

JJoqniX︲🎋🌟🌠

ah wait nvm. seems its not possible to merge a livestream embed and a playlist embed into one. but yea the above code should give you what you asked for. a livestream embed code using channel id.

loooked into implementation, ideed we don't parse that url correctly to be able to display this

assumption is that its individual video

in your examplefirst video doesn't work either

playlist works

this one works https://youtube.com/embed?listType=playlist&list=UUjk2nKmHzgH5Xy-C5qYRd5A

will be released soon https://github.com/webstudio-is/webstudio/pull/4786

JJoqniX︲🎋🌟🌠

Oh okay. So channel as a playlist will be supported got it.

JJoqniX︲🎋🌟🌠

Dunno why the embed channel stream doesn't work. Main common occurrence i found with it was. Only bigger youtube channel's were embedable. And some random ones didnt even work. But I'll keep digging on this.

Thanks again oleg! For atleast pushing the channel playlist support for now! ✨️

Maybe its a youtube setting in youtube account, did you google?

JJoqniX︲🎋🌟🌠

Yea there is a setting for it. "Allow embedding" so usually if this is ticked. Then only you can preview/watch a video/livestream via the embed.

JJoqniX︲🎋🌟🌠

I used chatgpt. To look for answers. Since googling didnt help much.

JJoqniX︲🎋🌟🌠

Another way is using the handle based live url.

Let me try doing this in ws

JJoqniX︲🎋🌟🌠

i thought rather than using other channels for testing, ill test it myself~

so this one works -

Plain Text

<iframe
    src="https://www.youtube.com/embed/live_stream?channel=UCdZBnUb7m8Pd_wUTDNqUu3Q"
    width="800"
    height="450"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen>
</iframe>

so this here is a scheduled stream. it would also work with livestream as well.

ill do some testing on a different channel as well and see if it gets embedded as well.

JJoqniX︲🎋🌟🌠

there is an issue where the playlist method via youtube component doesnt load properly in some browsers/mobile browsers, i was able to get it loaded properly on firefox based browsers like zen, im currently using arc, so i was able to get it working on a new incognito tab! dunno why but this is super weird. probably its faulty from youtube's end!
or maybe it has something to do with the cache? idk. since even now it doesnt load for me in arc. but does in other places. so weird.

if you can, can yu check from your end as well?
https://joqnix-13ed1.wstd.io/

JJoqniX︲🎋🌟🌠

yup its still weird i dont get this.

try it on codepen to be sure

list embed support was released

Add a reply

Sign up and join the conversation on Discord