Published on Sep 29, 2018

Using Fluidvids for responsive videos in Oxygen

Sridhar Katakam

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

When a YouTube video URL like 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.:

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' ) ) {
* 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.


// echo "hello world!";



That’s it!