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!


Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: