Tutorials

How to Embed Media to WordPress Responsive Themes

Pinterest LinkedIn Tumblr

There are lots of Free and Premium Responsive WordPress themes, but with some responsive themes, it is very important to make sure that the embedded media properly display on all devices,  And you don’t want that your responsive theme on your client site shows the unresponsive result for media files.  There are excellent Responsive Themes like Fullpane Theme from Themify (buy any theme, get any second theme for FREE!), Alyeska Responsive WordPress Theme and Qualeb: Responsive Premium WordPress Theme, although you can find more excellent Responsive themes on Best Responsive WordPress Themes for All Devices and Screen Resolutions.

If you still not satisfied with your Responsive Theme, there is a new WordPress Plugin “Responsive Video Embeds”  it will automatically resize your media file and has auto-embed features.

Responsive Video Embeds

responsive video embeds

This plugin will automatically resize your WordPress auto-embeds, including video and other iframes, in a responsive fashion. It currently supports the following providers:

    • YouTube
    • Vimeo
    • DailyMotion
    • Blip.tv
    • Viddler
    • hulu.com
    • Revision 3
    • Funny or Die
  • WordPress.tv
  • Scribd

Live Example

Visit the test page where you can resize the browser and watch the videos automatically scale to fit the resolution.

About WordPress Auto-embeds

WordPress has a nifty auto-embed feature, allowing authors to automatically turn a link to a video embed into a video player when a post is viewed. To turn this feature on check theAuto-embeds check box in Administration > Settings > Media SubPanel.

Under the hood

Please note that this plugin modifies the output of modify_embed_output filter, adding HTML & CSS to make the magic happen.

Credit for the method used in this plugin goes to Anders M. Andersen for crafting the method used to gracefully resize the embeds.

Multisite Compatibility

The Responsive Video Embeds plugin is compatible with WordPress Multisite, just use theNetwork Activate feature to enable responsive video resizing embed on every site. If you only want responsive video resizing to happen on a specific site, activate the plugin for that site only.

Also, check out the awesome resources below.

How to Managing Your WordPress Multi Sites
How to enable Mthe ulti-Site feature in WordPress 3.0?
How to do Domain Mapping in WordPress Multisite Network
How to do Domain Mapping Without a Plugin in MultiSite Network

Noor Mustafa Raza

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Write A Comment

Pin It