Fluid Video Embeds

Responsive WordPress websites and oEmbed video

The last few posts this month I talked about using 3rd party services and then posting the end result audio or video on a WordPress site. This time around, I want to discuss working with a responsive website and dealing with a YouTube or Vimeo video embedded in a post.

First lets define what a responsive web design is. Wikipedia states the following:

Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

So if you were to display wpmedia.pro on your iPhone / iPad or Android phone / tablet, then you’d see the same elements from the desktop site but scaled down and rearranged a bit to accommodate the smaller size and form factor. In my last post Hanging out with Google I embedded a video from YouTube into the post using what is called a oEmbed which allows you, with a bit of magic, to only specify the url of the YouTube video in your post and that’s it. There is no need for using an embed code or anything like that. The WordPress Codex explains oEmbed as follows:

All you need to do to embed something into a post or page is to post the URL to it into your content area. Make sure that the URL is on its own line and not hyperlinked (clickable when viewing the post).

The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content (such as a video) from site B.

oEmbed was designed to avoid having to copy and paste HTML from the site hosting the media you wish to embed. It supports videos, images, text, and more.

So in that post I put in the raw url for the YouTube video, and when I visited the site on my computer it looks great:

WordPress oEmbed Desktop

But when I went to the website from my iPhone 4S it ended up looking like this:

oEmbed Mobile

and horizontal it looks like:

20130221-010339.jpg

What is happening here is that the video isn’t responsive or “fluid” to the width of the area available on the screen.

Fluid Video Embeds WordPress Plugin

I went ahead and installed this plugin called Fluid Video Embeds which figures out what the width of the screen is. Then it does an API call to YouTube to find out what the aspect ratio is for the video. Once it knows what that is, it displays the video with the correct height and width without making the video area looks too fat or skinny More or less it preserves the aspect ratio of the video. Now my video ends up looking like this on my iPhone 4S:

oEmbed Responsive

Horizontal it looks like:

oEmbed Responsive

If you want, we can simulate looking at my responsive site on a mobile device in your web browser here:

Here is a non responsive version:

You can grab the corner of the web browser on the right side of the screen and drag it so the screen will become skinny. You’ll notice that the video will also get smaller but preserve its aspect ratio. Pretty cool huh? Now pull out your phone and go to this address to see it for yourself:

http://wpmedia.pro/oembed

Let me know how this plugin works for you in the comments below or if you use another plugin to get the same result. If you have any problems with the plugin please contact the developer directly, I didn’t write it, I just like what the plugin does for me: Fluid Video Embeds – Reviews

Jason Tucker

Jason Tucker

Web Developer at Tucker.Pro
Jason brings 15+ years of hands-on experience as a web developer and systems administrator at large corporations and businesses in the fields of healthcare, manufacturing, technology and entertainment. Specializing in PHP coded sites utilizing WordPress. Jason owns and operates Tucker.Pro a WordPress web development company in Whittier, CA. He is also the host of WPwatercooler a weekly WordPress YouTube show and podcast
Jason Tucker
Jason Tucker
Jason Tucker

10 Comments

  1. pcgs on February 21, 2013 at 3:29 am

    This article hits the spot for two sites we are working on right now. Thanks Jason!

  2. lorennason on February 21, 2013 at 6:39 am

    Awesome. Haven’t thought about this for a while but it will be useful

  3. GreggFranklin on February 21, 2013 at 6:49 am

    Adding to my Favorites! Thank jasontucker

  4. Jeff Hester on March 1, 2013 at 4:15 pm

    Nice. Does Fluid Embeds work without shortcodes? Just activate and it works? When I look at docs it says you CAN use shortcodes, which implies that they aren’t necessary.

  5. […] Today’s Quick Tip comes courtesy of WordPress media expert Jason Tucker. oEmbeds allow WordPress users to easily embed content from 3rd party sites such as YouTube and Vimeo by simply pasting the url of the video in the WordPress post editor. WordPress then turns that link into an embedded video. Easy-peasy. However, an increasing number of themes are responsive these days, meaning that they will resize to fit on a mobile device. But when you use oEmbed to place a video in your post, it is not responsive so it will not fit properly on a small screen. Jason’s solution is to use the Fluid Video Embeds plugin. Read more about it in Jason’s blog post “Responsive WordPress Websites and oEmbed Video“ […]

  6. behladesign on March 6, 2013 at 1:50 pm

    Great post Jason! Thanks for pointing this out.

  7. […] for tipping me off that one of my fave WordPress media guys, Jason Tucker, reviewed a plugin called Fluid Video Embeds. It specifically resizes videos on fully responsive […]

  8. iparamonau on October 4, 2013 at 8:38 am

    Hey guys, 
    Just wanted to give you heads up about the recent WP plugin that we released. It takes any URL and converts it into responsive embed. Well, almost *any*, of course. 
    http://wordpress.org/plugins/iframely

    Cheers,
    Ivan

  9. […]  while back I wrote about Responsive WordPress websites and oEmbed video and I still use the plugin I mentioned Fluid Video Embeds when working with YouTube and […]

  10. jelinecatacutan on June 27, 2014 at 8:14 pm

    This plugin doesn’t seem to work for me. :/ Not really sure what I’m doing wrong?

Leave a Comment

You must be logged in to post a comment.