Here’s 6 different ways you can make your embedded video’s responsive so they automatically resize in different sized browsers for mobile devices.
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.
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.
- Create a new folder in your child theme named lib
- 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.