macbookandrew / wp-youtube-live

Displays the current YouTube live video from a specified channel
20 stars 12 forks source link

WP YouTube Live

Contributors: macbookandrew
Donate link: https://cash.me/$AndrewRMinionDesign
Tags: youtube, live, video, embed
Requires at least: 3.6
Tested up to: 6.3.2
Stable tag: 1.10.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Displays the current YouTube live video from a specified channel.

Description

Displays the current YouTube live video from a specified channel via the shortcode [youtube_live].

Setup Notes

Your YouTube livestream must be set to “Public” or it will not work. This is a security feature of YouTube’s API and unfortunately there’s no way to work around it.

In addition, your live stream must be set to allow embedding on third-party sites. If that feature is unavailable, you may need to enable monetization for your account. See YouTube documentation for more information or help with allowing embedding.

How It Works

If no live video is available, you can display a specified video or a “channel player” showing all your recent videos.

You can also enable auto-refresh to automatically check for a live video every 30 seconds (warning: will increase server load, so use with caution).

By default, the server will check YouTube’s API and then cache that response for 15 minutes before checking the API again (you may change this value in the admin settings). If auto-refresh is enabled, clients will check against your server every 30 seconds and likely will hit that cache as well, so it can potentially take up to 16 minutes before a client will get a live video.

The length of both caches can be changed using the wp_youtube_live_transient_timeout filter (see below for more information).

If no live video is available when a page is loaded, several fallback options are available:

When a video ends, users’ browsers will check your server again to see if a live video is available. If so, it will load that; if not, it will fall back as set in your options.

Shortcode Options

Example shortcode: [youtube_live width="720" height="360" autoplay="true"]

Filters

The filter wp_youtube_live_no_stream_available will customize the message viewers see if there is no live stream currently playing, and takes effect after the fallback_message shortcode attribute is parsed (if fallback_message="no_message" is set in a shortcode, it will override the filter). For example, add this to your theme’s functions.php file:

add_filter( 'wp_youtube_live_no_stream_available', 'my_ytl_custom_message' );
function my_ytl_custom_message( $message ) {
    $message = '<p>Please check back later or subscribe to <a target="_blank" href="https://youtube.com/channel/UCH…">our YouTube channel</a>.</p>
    <p><button type="button" class="button" id="check-again">Check again</button><span class="spinner" style="display:none;"></span></p>';
    return $message;
}

The filter wp_youtube_live_transient_timeout is available to customize the cache timeout length in seconds. For example, add this to your theme’s functions.php file to set the cache length to 15 seconds instead of the default 900:

add_filter( 'wp_youtube_live_transient_timeout', 'my_ytl_custom_timeout' );
function my_ytl_custom_timeout( $timeout ) {
    return 15;
}

Event Listener

When a live stream is loaded, the wpYouTubeLiveStarted event is fired; you can use this to create custom front-end features on your site by adding an event listener:

window.addEventListener('wpYouTubeLiveStarted', function() {
    /* your code here */
    console.log('stream started');
    /* your code here */
});

Development of this plugin is done on GitHub. Pull requests are always welcome.

Installation

YouTube setup instructions: see this article.

  1. Upload this folder to the /wp-content/plugins/ directory or install from the Plugins menu in WordPress
  2. Activate the plugin through the Plugins menu in WordPress
  3. Add your Google API key and YouTube Channel ID in the settings page (Settings > YouTube Live)
  4. Add the shortcode [youtube_live] into any post/page to show the live player

Frequently asked questions

How does this work?

This plugin uses Google’s YouTube Data API to search for in-progress live videos and if one is found, embeds it in the page.

API-what?

API stands for “Application Programming Interface,” which basically means computer code that is able to talk to other computer systems and get or send information. Most API providers require an API key of some sort (similar to a username and password) to ensure that only authorized people are able to use their services.

What info is sent or received?

When the shortcode is used in a page, your web server makes a request to YouTube’s servers asking for information about the videos in your channel, using your channel ID and API key to authenticate. If you don’t have an API key set up or it’s not authorized for the YouTube Data API, the request will be denied.

For more information on setting up an API key, see the YouTube Data API reference; for purposes of this plugin, you’ll need a “browser key.”

Why doesn’t my live stream show up immediately?

Generally, it can take up to 15 minutes for the streaming page with the shortcode to recognize that you have a live stream, for several reasons:

  1. YouTube’s API caches information about your videos for a short time (seems to be 2 minutes max).
  2. To help you from exceeding the free API quota, this plugin caches YouTube’s API response for 15 minutes (configurable using the transient timeout setting), instead of checking the API every time an update is requested by a client. See Quota Units below for more information.
  3. If you are using a caching plugin (WP Super Cache, W3 Total Cache, etc.), the generated page content is cached on your server, including whatever shortcode content is available when the cache is created. However, this plugin provides a workaround by sending an Ajax request from the user’s browser when the page is loaded, and then every 30 seconds thereafter until a live video is available (also configurable using the wp_youtube_live_transient_timeout filter).

In short, there’s a tradeoff between showing the live video immediately and minimizing API quota and server resource usage, and I’ve tried to strike a reasonable balance, while allowing you the ability to tweak the cache timeouts yourself to fit your needs.

Quota Units

Estimated quota usage:

These are estimates; your usage may vary. To see your actual quota usage in real time, visit the API Usage page.

The YouTube quota limit has been tightened down in recent years: as of April 14, 2020, it allows a max of 10 thousand quota units per day. However, you can request a quota increase here.

If your API project has been active for more than 2 years or so, you may have a drastically higher quota limit and can set the transient lower.

I am looking at other ways to accomplish the necessary behavior closer to realtime while remaining within the quota limits.

Terms of Service and Privacy Policy

This plugin stores your channel ID and API token in your WordPress options table, but does not store or collect any other information.

Because this plugin helps you use the YouTube service, you should refer to these documents as well:

Screenshots

1. Settings screen

Settings screen

Changelog

1.10.0

1.9.0

1.8.8

1.8.7

1.8.6

1.8.5

1.8.4

1.8.3

1.8.2

1.8.1

1.8.0

1.7.22

1.7.21

1.7.20

1.7.19

1.7.18

1.7.17

1.7.16

1.7.15

1.7.14

1.7.13

1.7.12

1.7.11

1.7.10

1.7.9

1.7.8

1.7.7

1.7.6

1.7.5

1.7.4

1.7.3

1.7.2

1.7.1

1.7.0

1.6.4

1.6.3

1.6.2

1.6.1

1.6.0

1.5.4

1.5.3

1.5.2

1.5.1

1.5

1.4.2

1.4.1

1.4

1.3

1.2

1.1

1.0