This plugin allows you to embed a YouTube live stream and/or live chat on your webpage
This plugin requires Craft CMS 3.0.0 or later.
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
cd /path/to/project -
Then tell Composer to load the plugin:
composer require nystudio107/craft-youtubeliveembed -
In the Control Panel, go to Settings → Plugins and click the “Install” button for YouTube Live Embed.
You can also install Webperf via the Plugin Store in the Craft Control Panel.
YouTube Live Embed allows you to embed a YouTube live stream and/or live chat on your webpage.
You can also use it to determine whether a stream is currently live, and how many people are currently viewing the live stream.
Both the live stream and the live stream chat are embedded as responsive <iframe> elements, that you can control the aspect ratio of should you so wish.
The only configuration is the YouTube Channel ID in the plugin settings. If you do not know your YouTube Channel ID, here is how to find it.
You can also override this setting in the config.php or at runtime via Twig, should you need to (see below).
You can see an example of YouTube Live Embed being used live on at nystudio107.com/live.
In order to embed a YouTube Live Stream on a website, you need:
- Live Streaming is enabled
- Embedding of Live Streaming is enabled
- Monetization is enabled
You can find these on the YouTube Features page, and read more about it in the Enable embedded live streams from YouTube
If you haven't satisfied the above requirements, when someone goes to play your live stream embedded on your website, they will see this message (you can test it with an Incognito browser):
Video unavailable
Watch this video on YouTube.
Playback on other websites has been disabled by the video owner.
N.B. That in order to enable Monetization, you must have a linked AdSense account. Just enabling monetization is enough, and ads must be enabled, but they will not appear in your videos unless you specifically enable them.
To embed a live stream video, simply do:
{{ craft.youtubelive.embedStream() }}This will embed a responsive <iframe> element with a fixed aspect ratio that grows to fill its parent container.
The default aspect ratio is 16:9 but you can also optionally change it via:
{{ craft.youtubelive.embedStream(ASPECT_RATIO_X, ASPECT_RATIO_Y) }}If you have a Google AMP page, you can use:
{{ craft.youtubelive.embedStreamAmp() }}To embed a live stream chat, simply do:
{{ craft.youtubelive.embedChat() }}This will embed a responsive <iframe> element with a fixed aspect ratio that grows to fill its parent container.
The default aspect ratio is 16:9 but you can also optionally change it via:
{{ craft.youtubelive.embedChat(ASPECT_RATIO_X, ASPECT_RATIO_Y) }}If you have a Google AMP page, you can use:
{{ craft.youtubelive.embedChatAmp() }}By default, the YouTube Channel ID you specify in the plugin's settings will be used, but you can also change it dynamically via:
{% do craft.youtubelive.channelId(CHANNEL_ID) %}This could be useful if you had a website where you had more than one streaming channel to contend with.
If you do not know your YouTube Channel ID, here is how to find it.
To determine if the YouTube Video Stream is live, you can do:
{% if craft.youtubelive.isLive() %}
{% endif %}You can also ping the YouTube Live Embed controller via JavaScript to get a dynamic result:
/actions/youtubeliveembed/info/is-live
To determine the number of viewers watching the live YouTube Video Stream, you can do:
{% set liveViewers = craft.youtubelive.liveViewers() %}You can also ping the YouTube Live Embed controller via JavaScript to get a dynamic result:
/actions/youtubeliveembed/info/live-viewers
Some things to do, and ideas for potential features:
- Release it
Brought to you by nystudio107