Fluid Video Embeds Demo

Try resizing the browser window or viewing this page on your mobile phone.

These videos are in 47.5% width containers. The videos maintain their aspect ratio and scale to fit the width of their parent container. (Make the browser window smaller and see!)

Here’s a 4:3 video:

…and another

This one is 16:9

And so is this one:

YouTube only tells us if the video is HD or not, so for now YouTube videos are presented as either 16:9 or 4:3.

This video is from Vimeo and has a super wide non-standard aspect ratio:

Vimeo supports pretty much any aspect ratio you give it. The Fluid Video Embeds plugin reads the dimensions from Vimeo’s API and then figures out the aspect ratio and preserves it.

 

This one is 2.39:1

 

More Anamorphic Videos

 

And this next video is just plain awesome!

« Back to Fluid Video Embeds Blog Post

« Back to WordPress.org Plugin Page

33 Comments

Add yours →

  1. Hi,
    it is a great plugin! Is it possible the float the video to the left and have some text on the right? Perhaps with custom css?

  2. I’m looking for a responsive, full width, auto play, with controls (play/stop/volume etc.) plugin that I can include in my header.php of my WP template. Can your plugin do those things?

  3. Hi,
    A week ago, I asked for your permission to translate your Fluid Video Embeds plugin. Since I didn’t get any answer from you, it would be very kind of you to consider my proposal and let me know if its alright to translate it.

    Regards,
    Borisa Djuraskovic

  4. Hi,
    Let me introduce myself. My name is Borisa Djuraskovic. I am associated with Web Hosting Hub. Your Fluid Video Embeds plugin at http://jamie3d.com/fluid-video-embeds-demo/ is very interesting. I want to translate it to my native language Serbo-Croatian.
    Do you mind if I do so?
    Please let me know!!!
    Regards,
    Borisa Djuraskovic

  5. Hi. How to remove (automatic) Youtube allowfullscrenn option, and add autoplay=1, autohide=1&iv_load_policy=3 functions?

    Thanks in advance!

  6. That plugin is awesome for ratios but I can’t change any other parameter like the scale or adding a border, etc. As soon as I try to to some parameters the video disappears and leaves only the source address of the video.

  7. Hi there, I installed this plugin, and it had no effect. My youtube video is inserted with the iframe embed code. I saw you mention in the forum something about using oEmbed- not sure if that is different or how to do it. Any help or suggestions much appreciated. Thank you!!

  8. Hey Jamie, very nice plugin I’m using it since 6 months. Recently I’m running into some problems though.

    Sometimes I want to respect the maximum width (in pixels) of video in the iframe. The plugin overrides it. I understand that that’s the whole point of the plugin 🙂 but the video is sometimes way too wide.

    Is it possible somehow to restrict the maximum width of video at the same time reduce the width in small screens?

  9. Hi Jamie,
    would it be possible to add flickr support ? I solved the youtube/vimeo issue with your great plugin, but since i use a lot of flickr integration it ‘would be great to make everything work in on plugin.

    Anyway thank you for your great work !

  10. The plugin for my WordPress site has been working great. All the videos have been 16:9 ration. However, my client uploaded a new YouTube video and for some reason, YouTube must not be setting the aspect meta element to “widescreen” as it’s showing in the WordPress page as a 4:30 video. (i.e. the height for the fve-video-wrapper DIV is defaulting to a height of 75% vs. the ‘widescreen’ 56.25% I see your PHP code sets if it sees ‘widescreen’ from YouTube.) Do you know of a quick way to see what YouTube is sending so I can check if the problem with the client’s video? Or possibly a way to force YouTube to set it as a widescreen video? I suppose I could modify the PHP code and make the default height for that main DIV for videos using this plugin to be 56.25% since they all will be if I had to. Any suggestions would be great.

    • For now since all my videos are widescreen, I set the the “padding-bottom” variable in the plugin to always be 56.25%. Waiting to hear from the client to see if maybe they encoded it with a pixel aspect ration that wasn’t square which sometimes throws YT off. Thanks again for the plugin!

  11. YouTube and Vimeo. What about my own .mp4s I have on my Amazon S3?

  12. Hi Jamie,
    Is the plugin compatible with multisite.

  13. Hiya folks!

    Just wanted to let you know that your Fluid Video Embeds plugin was included in a round-up of responsive WordPress plugins today.

    Here’s a link to the article: http://wpmu.org/16-cool-responsive-wordpress-plugins-for-images-and-videos/

    Have a great day!

  14. Thanks for this. Does the plugin work for playlists?

  15. Will the plugin allow me to omit the Vimeo branding?

    • No, the Vimeo branding is part of their agreement that allows you to use their service. I actually can’t and will not try to remove the branding. I believe that Vimeo’s Pro service allows this, but at that point you need to do a custom integration and you’ve already exceeded the ability of this plugin.

      This plugin simply makes the videos stretchy (so they fit your layout) and reduces the video overlays for a less cluttered appearance (using YouTube’s and Vimeo’s available options).

  16. that’s really neat scaling trick…nice…pretty useful for viewers using tablets and android phones…

  17. how / where, do you configure (how many videos on one line) ??
    Plugin already installed, activated..
    The is no configuration, which will allow me to embed FOUR YouTube videos on ONE Line.
    does my blog HAVE to be on WordPress.org ???

    • Hi Ray,
      Yes this plugin only works for self hosted WordPress sites, so as long as you can install the plugin, it will work.

      It doesn’t offer the option to show videos side by side. The demo page is just designed that way to show that the plugin allows the video to scale and fit the space that’s given to it, not just the full page width.

Leave a Reply