squarecandy-better-youtube

A WordPress plugin to improve the look and behavior of YouTube videos on WordPress.

• hide title and text info
• simplify controls
• don't show suggested videos on completion
• "modest branding"
• "dark" theme
• use HD if available
• apply responsive iframe via fitvids.js

We filter oembed_result & embed_oembed_html to:

• replace any youtube playlist iframes with our own playlist code (looks for youtube links like https://www.youtube.com/watch?v=xxx&list=yyy), or
• wrap youtube iframes in fitvid divs & add extra parameters, or
• wrap vimeo iframes in .fitvid divs

We filter get_the_excerpt to wrap all iframes in fitvid divs.

We filter the_content to replace <p></a></li> with </a></li>

Then we have js to:

• run fitvids (responsive size) on .fitvid divs
• make .custom-playlist a magnific popup
• control display/interaction of playlists

To locate content to test for this plugin:

• Many sites have a page like 'page-for-testing' that often contains youtube/vimeo videos
• Mysql query for youtube/vimeo embeds not already wrapped in an inframe or <a>

SELECT ID, post_date, post_content, post_name, post_type FROM posts WHERE post_content REGEXP '(youtube|vimeo)[^[:space:]]+\?[^[:space:]]+' AND post_content NOT REGEXP '(src|href)=.*(youtube|vimeo)' AND post_status = 'publish' AND post_type NOT IN ('oembed_cache') ORDER BY post_date DESC;

• Mysql query for youtube playlists:

SELECT ID, post_date, post_content, post_name, post_type FROM 1Vb8MV_posts WHERE post_content REGEXP 'youtu[^[:space:]]+\?[^[:space:]]+list=[^[:space:]]' AND post_status = 'publish' AND post_type NOT IN ('oembed_cache') ORDER BY post_date DESC;

Playlist Option

To enable the nice visual playlist generator, you must obtain a google API key that has the YouTube Data API v3 enabled and place it in your wp-config.php file:

define('YOUTUBE_API_KEY', 'yourAPIkey-XX0XX0XX0XX0-000-XXXXXXXXX-00)

Previously we used basic oembed functionality, with custom-api-playlist we use YT js to instantiate players so that we can do things like autoplay, or stop other videos when we start a new one.

Possibly not fully implemented, but the possible layouts are:

• single-popup: (Default) Single Popup (page shows playlists, popup shows single video with navigation arrows)
• load-none: "Play in place (page shows playlists, play in place)
• cover-popup: "Cover Popup (page shows covers, popup shows playlist)
• load-first
• load-none

For examples of how to use in a template, see onebeat theme template-parts/content-video.php

Composer deps maintenance

This repo has production composer deps - the directories of these that are listed in additionalCopyFiles in grunt-options.json and copied into /inc during copy:preflight. Because we're using autoloader you'll need to run composer install --no-dev before doing the copy, so that only the classes from the production deps will be included in the generated autoloader. (and then run composer install again when done) Since deps may change over time we'll need to periodiocally check whether the directories listed in additionalCopyFiles need to be updated. You can check the required directory list by running composer show --name-only --no-dev | sed 's!/.*!!' | uniq

Roadmap

• Add options screen to enable/disable playlist feature, choose options for player display, etc.