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

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: