So you have been using YouTube to store your church service videos and now you want to embed not just a single YouTube video, but the entire Sunday Service playlist. Well, I looked into doing just this after seeing the YouTube Live Channel Shortcode solution, thanks Jonathan Anderson, for the inspiration. So similar to that recipe, I've adapted the Shortcode to create a (New) YouTube Playlist Shortcode, the main changes are to the url to access the correct API and removal of the showinfo parameter which is now deprecated. I'll walk you through your first use of it here.

YouTube

  1. Go to your YouTube channel and select Playlists.
  2. For the playlist you are interested in embedding, select View Full Playlist.
  3. Under the title, but above the description select the more options (three horizontal dots) and select Playlist Settings.
  4. Make sure that Allow embedding is selected. (Also, bonus tip if you are using this for a Sunday Service playlist you might as well select Add new video to top of playlist - this setting combined with an Auto add rule, under Advanced Settings can be a time saver - Outside of scope for this recipe but worth looking into later)
  5. Select Done
  6. Now look at the browser URL and you should see something like:
    https://www.youtube.com/playlist?list=PL50nOTU-5iyQgeg2rCFhMMWmqw4Z7qxVp
    Open a blank .txt file and copy and paste the list ID into it, the string after the equal sign i.e. PL50nOTU-5iyQgeg2rCFhMMWmqw4Z7qxVp from the example above. You'll need this for later.

Rock Setup

  1. Next download the file from the Download link at the bottom of the page or copy paste the information and code below.
Name:
Youtube Playlist

Tag Name:
playlist

Tag Type:
Inline

Description:
A shortcode for embeding a YouTube playlist.

Documentation:
This will put the YouTube playlist onto your page in a responsive container. There are options that you can configure

Basic Usage:

{[ playlist id:'PL8kpHK4YIwY4' ]}

Options:

id (required) – The YouTube Playlist ID. Navigate to the playlist on https://www.youtube.com/ and then copy the list id from the url, after '?list=' normally starts with 'PL' for a playlist
width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure.
controls (true) – This determines if the standard YouTube controls should be shown.
autoplay (true) – Should the video start playing once the page is loaded?

Shortcode:

{% assign wrapperId = uniqueid %}
{% assign parts = id | Split:'/' %}
{% assign id = parts | Last %}
{% assign parts = id | Split:'=' %}
{% assign id = parts | Last | Trim %}
{% assign url = 'https://www.youtube.com/embed/?listType=playlist&list=' | Append:id | Append:'' %}
{% assign controls = controls | AsBoolean %}
{% assign autoplay = autoplay | AsBoolean %}

{% if controls %}
{% assign url = url | Append:'&controls=1' %}
{% else %}
{% assign url = url | Append:'&controls=0' %}
{% endif %}

{% if autoplay %}
{% assign url = url | Append:'&autoplay=1' %}
{% else %}
{% assign url = url | Append:'&autoplay=0' %}
{% endif %}

#{{ wrapperId }} {
width: {{ width }};
}

.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Parameters:
controls: true
autoplay: true
width: 100%

Option: If you want to use the privacy-enhanced mode update the url to use https://www.youtube-nocookie.com instead of https://www.youtube.com

  1. Head over to your Rock server and go to Admin Tools > CMS Configuration > Lava Shortcodes
  2. Scroll to the bottom and hit the + symbol.
  3. Enter the information from the file in the correct fields (reference the screenshot below if uncertain), adjust the parameters to suit your preferences and hit save.
    YouTubePlaylistShortcode.png

Rock Use

  1. Go to the website page that you want to embed the live stream on and drop a HTML block on the page.
  2. Edit the html block and add the newly created shortcode with your YouTube Playlist ID that you got earlier so it looks like below and then hit save:YouTubePlaylistShortcodeExampleBlock.png
  3. That's it, go check your page and it should have loaded up your playlist with the first one starting up when you get there. Something like the example below, note the list icon in the top right corner highlighting that there are 13 videos in the playlist. 
YouTubePlaylistShortcodeExamplePage1.pngYouTubePlaylistShortcodeExamplePage.png

Mix and Match

Now that you have that, start thinking about how you could use this to replace your live stream during the downtime ... or any other cool mix and match possibilities that come with lava.

Hope that helps.