Using Fluidvids for responsive videos in Oxygen

This tutorial provides the steps to make YouTube and Vimeo oEmbeds automatically responsive in Oxygen.

When a YouTube video URL like https://www.youtube.com/watch?v=tpxr6BCrdDs is pasted in the WordPress editor, it automatically embeds the YouTube video player. We can use Fluidvids, a lightweight (just 1KB) Javascript module to make these responsive on the frontend.

Live demo: Any single post page on this site that has a video embed. Ex.: https://wpdevdesign.com/the-events-calendar-in-oxygen/

Step 1

Install and activate My Custom Functionality plugin.

Upload fluidvids.min.js to the plugin’s assets/js directory using a FTP client or cPanel file manager.

Edit plugin.php file and replace the code inside custom_enqueue_files() with

// if this is not a single post, abort.
if ( ! is_singular( 'post' ) ) {
    return;
}

/**
 * loads JS files in the footer.
 */
wp_enqueue_script( 'fluidvids', plugin_dir_url( __FILE__ ) . 'assets/js/fluidvids.min.js', '', '2.4.1', true );

Replace if ( ! is_singular( 'post' ) ) { with your required if conditional.

In this example, we are loading Fluidvids on single posts.

Step 2

Edit the Template for single posts with Oxygen.

Add a Code Block at the end of other existing elements.

PHP & HTML:

<?php
    // echo "hello world!";
?>

Javascript:

fluidvids.init();

That’s it!

Reference: https://github.com/toddmotto/fluidvids