Skip to:
Content
Pages
Categories
Search
Top
Bottom

A Solution for Creating Fluid Video Widths In BP!

  • Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    I love the new default BP theme’s ability to resize to fit almost any screen, phone, tablet, etc., but it is missing one key quality, dynamic video widths.

    Enter FitVids; “A lightweight, easy-to-use jQuery plugin for fluid width video embeds.”

    http://fitvidsjs.com/

    https://github.com/davatron5000/FitVids.js

    http://vimeo.com/28523422

    Just add this to your themes header and that’s it:

    `

    $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(“#content”).fitVids();
    });
    `

    It currently supports: Vimeo,YouTube, Blip.tv, Viddler, Kickstarter

    You can add support for any type of embed using the following:

    ` $(“#thing-with-videos”).fitVids({ customSelector: “iframe[src^'http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']“});
    // Selectors are comma separated, just like CSS`

    PS
    @r-a-y @karmatosed
    I know I created a couple other topics related to this, but I’m having a hard time finding them.

    PSS
    For those also looking for fluid images check this out:
    http://unstoppablerobotninja.com/entry/fluid-images/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Avatar of Tammie Lister
    karmatosed
    Moderator

    @karmatosed

    1 year, 7 months ago

    This is good however stretching (hoping it has a maximum point it doesn’t go above) even video above it’s natural size causes pixelation and other issues look wise. It really depends on how wide your widest is on your site though.

    Does this have a maximum point being the natural largest point of the video? That to me would seem a sensible clause.

    Scaling down is a good idea though. For those that do want wide-narrow and are ok about the minus points it is a good solution though. I still think go with html5 when you can don’t even use iframes but output from popular video hosting can get in the way of that ideal.

    Images can be done without scripting and should if you can. A huge danger of responsive is falling for the scripting solutions when simple bulk use of modernizr and then applying media queries can work. Piling on javascripts will not be the best method of adopting responsive.

    Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    My knowledge on this subject is admittedly weak, but I don’t see how stretching would be a issue. The default theme max width is far under most of the big video hosts max embed size. Not using iframes is not a solution, unless someone can tell another way users can embed video.

    I’m not sure which way I’m going to go on the images. Most likely I’ll just use a css solution.

    Modernizr is a good idea in theory, but it has it’s own drawbacks. Although I have considered using the HTML5 Boilerplate for the base of a child theme. But that’s another story.

    If I was designing a small website with little or no com unity I would agree with most of what you said, but with a over a million visitors a month it’s a whole other ballgame.

    But like I said, I’m new to this dynamic web, so maybe there is something here I don’t fully understand.

    Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    It works great throughout BP, except with the ajax. Anyone have any ideas?

    Avatar of Tammie Lister
    karmatosed
    Moderator

    @karmatosed

    1 year, 7 months ago

    Modernizr hasn’t had any draw backs for me. What exactly is your issue with it? Just load in WordPress after jquery and works like a charm.


    wp_enqueue_script("jquery");
    wp_enqueue_script('modernizr', get_stylesheet_directory_uri() . '/scripts/modernizr.js', array("jquery"), '2.0');

    I store a hand rolled version of modernizr in my scripts/ folder. As I use child themes I use stylesheet as roll variations depending on what site requires.

    My point about the width and stretching is not what the host uses but what you embed – it can limit to the embed size and therefore stretch. But, it depends on what hosting you are using for video.

    I’ve worked on both the small and large scale with responsive so know both sides of the story.

    Ajax issues sounds to me like a scripting clash I’d check using firebug what is going on if I was you.

    Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    Sorry for some reason I was thinking of Dean Edwards ie7-js instead of modernizr (staring at code too long). IE7-js tends to crash the browser if run in IE compatibility mode. But I still don’t see how Modernizr would address the fluid width issue for Youtube, Vimeo, etc. If I was hosting the video myself and using the video tag I could see it working or am I missing something?

    I don’t see any errors in firebug. The ajax works but it just isn’t applying the fix to the newly loaded content. This is just a guess but I think the FitVids only runs on the page-load so when new content is loaded via ajax the videos are unaffected.

    Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    I should point out for those that are not as anal-retentive as me, this simple css will also get the job done (it gives some strange aspect ratios):

    `#content iframe, #content object, #content embed {
    max-width: 100% !important;
    }`

    Avatar of Tammie Lister
    karmatosed
    Moderator

    @karmatosed

    1 year, 7 months ago

    I’d really not recommend any !important like that as a solution it’s also not going to play well with all browsers or as you say keep the aspect ratio – so a bad solution.

    I was suggesting from a media queries / html5 point to use modernizr as your shim and sub for respond.js.

    Avatar of FIQ
    FIQ
    Member

    @fiq

    1 year, 7 months ago

    How would that work with Youtube, etc?

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Topic Info

Topic Tags