How To Make Your Embedded Video’s Responsive

Here’s 6 different ways you can make your embedded video’s responsive so they automatically resize in different sized browsers for mobile devices.

You can use CSS code, Javascript or install one of several plugins.

CSS Code

This code will make your videos flexible so they change size when viewed in different size browers.

You’ll need to add the CSS code to your style.css file and the HTML opening and clsoing div tags before and after your video embed code or Youtube iframe.

Demo

Add this code to the end of your child themes style.css file.

Then wrap your embed code in div tags with the same class you use in your style.css file.

This method didn’t always work for me in all browsers.

Source: Creating Intrinsic Ratios for Video

Using Javascript

1. Firstly, download the 2 javascript files (fluidvids.js & fluidvids.min.js) from fluid vids from Github.
2. Create a new folder in your child theme named lib
3. Upload the 2 javascript files to your child themes lib folder. child/lib/js
4. Add this PHP code at the end of your child themes functions.php file.

All you need to do now is paste your video url on its own line using the WordPress text editor and you’re video will now resize in all browsers.

Responsive Video Embed Plugins

Here’s 4 good plugins which also make all the videos on your website responsive.

• Fluid Video Embeds
• Advanced Responsive Video Embedder
• Genesis Responsive Video Plugin
• Fluid Width Video Embeds

Thanks to Anita & the SP community forums users for this great tip.