12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
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 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' ) ) {

 * 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!

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