YouTube Playlists with Schema

Makes available shortcode for embed of responsive single videos and truly responsive grids from YouTube video playlists, which include markup as recommended by google.

After installing go to:
Settings > YouTube Playlists with Schema
to configure the plugin.

Requires YouTube Data API key – Instructions for getting the api can be found in the installation tab.
Shortcode examples (remove the spaces immediately within the square brackets):
single videos
[ yt_video_wrap width=”100%” alignment=”none” ]your YouTube 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.

[ 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
*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
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

The YouTube data api key

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.


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.

meta itemprop="name" content="" 
meta itemprop="publisher" content="" 
meta itemprop="description" content="" 
meta itemprop="thumbnailUrl" content="" 
meta itemprop="embedURL" content="" 
meta itemprop="uploadDate" content="" 

With content values pulled from the YouTube API.

The plugin detects the existence of it’s shortcode in the page (post) content. If you or your theme are adding the shortcode to a meta box, the plugin will not detect the shortcode and will not call the css and jQuery necessary for proper display. You can overcome this by selecting the “Universal” (ver 1.0.1+) option in the plugin settings.

Javascript is used to determine the height of the title boxes so that all boxes are the same height. If a tab/accordion is closed on page load the a height of zero will be assigned to tiles in lists. To overcome this we need to call the javascript after the tab/accordion is clicked. Like this:

function jmayt_footer(){ ?>
    <script type="text/javascript">
    jQuery('.jma-tabbed').find('li').click(function(){//.jam-tabbed and li will have to be changes based on your markup
        setTimeout(function() {
        }, 200);

<?php }

function jma_template_redirect(){
    if(is_page(array(123, 1866, 321) || is_single(array(987, 456)))//optional page number to apply the function to 
        add_action('wp_footer', 'jmayt_footer');
add_action('template_redirect', 'jma_template_redirect');

The settings page

Video id

List id


  • Original

[ yt_grid item_font_length=70 item_bg=”#660000″ item_gutter=20 item_spacing=10 yt_list_id=”PLF5563A1788629806″ ]

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – Ask the Film …

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – The Preview

OK Go – This Too Shall Pass – Rube Goldberg Machine – Official Video

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – Personal …

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – The Space

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – Nerds + Rock …

OK Go – Behind the Scenes of This Too Shall Pass (RGM) – The Machine

OK Go – This Too Shall Pass – Rube Goldberg Machine – Official Video

[ yt_video_wrap width=”50%” alignment=”right” item_font_alignment=left ][ /yt_video_wrap ] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

[ yt_video video_id=”qybUFnY7Y8w” width=”100%” alignment=”none” ]

OK Go – This Too Shall Pass – Rube Goldberg Machine – Official Video

Grid with default setting from screenshot

OK Go - This Too Shall Pass - Official Video

OK Go - End Love - Official Video

1000 MPH - by Ok Go

OK Go - Get Over It

OK Go - It's A Disaster

The Strokes - Last Nite (Official Music Video)

The Strokes - Someday (Official Music Video)

The Strokes - Reptilia (Official Music Video)

The Strokes - Hard To Explain (Official Music Video)

The Strokes - 12:51 (Official Music Video)

The Strokes - The End Has No End (Official Music Video)