YouTube Playlists with Schema Plugin

Creates styled grids in WordPress pages/post/sidebars from YouTube Playlists. Also, displays single YouTube videos from video id. All videos displayed through plugin block or shortcode (grids and single) include schema.org metadata markup as recommended by google.

Requires YouTube Data API key – Instructions for getting the api can be found in the installation tab.
Block display for WordPress version 5+

Shortcode examples:
single videos
[yt_video_wrap width=”100%” alignment=”none”]url here[/yt_video_wrap]
[yt_video video_id=”your_yt_video_id” width=”100%” alignment=”none”]
notice the optional width and alignment attributes above – just used to make simple positioning easier.
lists
[yt_grid yt_list_id=”your_yt_list_id”]
Display attributes can be used to overwrite the plugin settings on a list by list basis (^indicates can be applied to grids only).
item_font_color – the color of the h3 title
item_font_size – title size in px
item_font_alignment – left, right, center
item_font_length – number of characters from title to display (will round down to nearest word)
item_bg – background color
item_border – border color
^query_max – maximum number of videos to display
^query_offset – offset query at beginning by this value
^item_gutter – horizontal spacing (even # between 0 and 30 recommended)
^item_spacing – vertical spacing
button_font – for expansion buttons on upper left of items (the arrow color)
button_bg – for expansion buttons on upper left of items (bg)
^Columns – if you use and column attribute in the shortcode ALL plugin settings will be ignored and just shortcode values will be used. This was done on the assumption that if you want to take control of the column display of a particular list you should take complete control.
lg_cols – 1200+
md_cols – 992+
sm_cols – 768+
xs_cols – 768-
additionally the id, class and style attributes are also available and will have the same syntax and behavior as in html.

1.Upload youtube-playlists-with-schema folder to the /wp-content/plugins/ directory
1.Activate the plugin through the ‘Plugins’ menu in WordPress

The YouTube data api key
Go Here for more detailed instructions
This may be the most complicated part of the whole process.
FIRST log into the google account you plan to use for the api key. You can use any account for this it doesn’t have to be the account where the videos are housed. Once you have the api key you can use it to get any public YouTube video or list.

ONCE YOU ARE LOGGED IN click here
You should see (or maybe with an additional ‘select’ box):
click ‘create’

You should see this screen – name your project and click ‘create’

Now you see this – notice your project name at the top and you have no api’s enabled. we need to enable one from the ‘Library’ so click on ‘Library’

From the Library we just need a simple ‘YouTube Data API’ – so click on that item

You get some information about the api, but the objective here is to enable the api by clicking ‘ENABLE’. You should see a little working icon and enable should switch to disable.

As Google suggests we are going to click ‘create credentials’ next

Here we select ‘website (javascript)’ from the second dropdown and the ‘Public data’ radio button then hit the big blue ‘what credentials..’ button (SPOILER ALERT – you need a simple api key, in case you are not seeing this exact sequence)

We may want to wait until we go live to restrict the key. Key restrictions are more about resource allocation than security. Like I said, you can use any key to get the information we are using for this. If someone where to use your key for another purpose (which could only be to get this already public data) it would only impact the number of video data calls you can make with the key.

In any case you can click ‘Credentials’ in the sidebar to see your key. Use the pencil if you want to edit the name and /or restrict the key.

Note – You can use this ‘project’ on other sites. Just come back to this page (you may want to bookmark) make sure you are in the correct project go directly to credentials and create another api key by clicking the big ‘create credentials ‘ button and choosing ‘api key’ (top option). The new key will do the same thing and have a separate usage allocation.

1. 

   The plugin settings page

2. 

   Video id - use the value after v=

3. 

   List id - use the value after list=

4. 

   The grid

5. 

   Single video (aligned right at 50%)

6. 

   Shortcut keys can be found in the text editor only

1.0

• Original

1.0.1

• Add universalize script option

1.1

• Sperctrum color picker replaces farbtastic
  https://bgrins.github.io/spectrum/

1.2

• add overlays
• add error handling

1.2.1

• overlay fixes

1.2.2

• overlay fixes

1.2.3

• overlay fixes

1.2.4

• overlay fixes

1.3

• add query_offset and query_max values
• allow 50+ results to be returned

1.3.1

• fix array issues in settings class
• delay play icons until videos are ready on cached images setup

1.3.2

• add publisher and logo and interaction count and duration to schema

2.0

• improve Schema
• add content blocks for single videos and lists
• replace colorpicker
• display single videos with overlays
• reorganize files

2.3

• change to iframe api
• add outer div for compatibility
• fix cached image functionality

2.4

• update and broadin iframe api
• update jQuery to 3.x

2.4.1

• finally fix cached image functionality
• show errors to admin only

2.5

• accept urls in blocks
• adjust left and right alignment display for single items

2.5.1

• verify compatibility

2.6

• serverside render fixed
• strip quotes from shortcode
• php function attributes

2.6.1

• show doink in editor