Enable the YouTube iframe API for embedded videos

By default, videos embedded in WordPress posts are missing the enablejsapi querystring parameter that allows YouTube’s iframe API to interact with them. Fortunately you can filter the results of embedded media using the oembed_result filter. Here’s an example:

function my_youtube_player_iframe_api( $html ) {
	if ( false !== strpos( $html, 'youtube' ) ) {
		$html = str_replace( '?feature=oembed', '?feature=oembed&enablejsapi=1', $html );
	}
	return $html;
}
add_filter( 'oembed_result', 'my_youtube_player_iframe_api', 10, 1 );

OEmbed results are cached as post meta, so once you’ve modified the output you’ll have to delete previously-cached URLs before the new filter will take effect for existing posts.

Once you’ve done all of that you can configure and use the iframe API to track interactions, manipulate video controls, and do anything else that the API exposes.

Add async, defer, or other attributes to enqueued WordPress scripts

Sometimes it’s useful to add the async or defer attributes to your script calls in order to prevent that script from blocking the rest of your page from rendering. This is particularly useful with third party scripts which you do not host in the same place as the rest of your site.

If you need to load an enqueued script asynchronously in WordPress, or modify the <script> element in any other way, you can use code like the following:

/**
 * Add async attributes to enqueued scripts where needed.
 * The ability to filter script tags was added in WordPress 4.1 for this purpose.
 */
function my_async_scripts( $tag, $handle, $src ) {
    // the handles of the enqueued scripts we want to async
    $async_scripts = array( 'some-script', 'another-script' );

    if ( in_array( $handle, $async_scripts ) ) {
        return '<script type="text/javascript" src="' . $src . '" async="async"></script>' . "\n";
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );

The script_loader_tag filter was added in WordPress 4.1 for specifically this purpose. It is run whenever a script tag is generated by WordPress using the wp_enqueue_script() function. In this example we compare the script $handle against a list of known scripts that we want to load asynchronously.

New Web App: Healthy Glow for Video Chat

Video chat is a great way to communicate, but it doesn’t lend itself to the most flattering view of your face. The problem, of course, is that video chat almost always puts you in front of a large source of blue light (your computer screen) which rarely blends well with the ambient light in a dimly lit office. As an amateur photographer I’ve found myself tinkering with ways to fix the light on my face when I’m in a video call.

At first I just put a big orange image on the screen, which did the job nicely. However, I found that I often needed to take notes during calls, and bringing up my note taking application brought the ugly light back. So I took a few minutes to cook up a better solution.

Healthy Glow is one of the simplest web apps I can imagine, but it actually serves its purpose beautifully. It’s a big, orange text box that you can type notes into. It uses local storage so that your notes never get sent to the server and never get deleted unless your clear them (or change browsers.) No accounts, no back end, just a simple web page that addresses a very specific problem.

Have a look at a before and after image and I think you’ll agree that this very stupid idea of mine actually makes a significant difference:

Before: Ugly Blue Light

Before: Ugly blue light

After: Healthy, warm light

After: Healthy, warm light

If you spend a lot of time in front of a webcam, please feel free to give Healthy Glow a try. I think everyone involved in your next call will agree that it casts you in a positive light (groan.)

New Plugin: Custom Related Products for WooCommerce

I don’t think I’ve ever built a WooCommerce site where the client didn’t ask: “How do I pick which related products to display.” The answer has always been “You don’t; the system randomly picks products from the same category.” No client has ever been happy with that answer.

Now I’m happy to say I’ll never have to give that answer again, and neither will you! My latest plugin, Custom Related Products for WooCommerce, replaces the default related products functionality in WooCommerce. With the plugin activated, edit any product and click the “Linked Products” tab. In addition to Cross-sells and Upsells, you’ll now have a Related Products box. As long as you’re using a default related products implementation, the plugin will work automatically to show the products you selected in the Related Products list at the bottom of the detail view, no theme updates required.

Get it!

You can download Custom Related Products for WooCommerce from WordPress.org or install it from the Add New Plugins page in your admin starting today. If you have suggestions for changes, you can fork the plugin and submit pull requests with GitHub.

custom-related-products

WordPress Plugin: Override Comment Deadline

Today I’m pleased to release a discussion-focused plugin to the directory, called Override Comment Deadline. Now you can have “Automatically Close Comments” enabled in your discussion settings to limit spam activity on old posts while keeping commenting open on specific posts. To use it, make sure you’ve set a deadline on the discussion settings page and then edit any post and check the box to keep comments open indefinitely.

Get it!

You can download Override Comment Deadline from WordPress.org or install it from the Add New Plugins page in your admin starting today. If you have suggestions for changes, you can fork the plugin and submit pull requests with GitHub.