Fluid-width-video-wrapper

[drwool]

I’m in the middle of converting a third site from Weaver II Pro to Weaver Xtreme. This site has a few pages with embedded YouTube videos. And I’m having a problem, because Xtreme is modifying my HTML to put these videos into fluid-width divs.

Specifically, the HTML I’ve written into a page looks like this:
<iframe style=”display:block; margin: 0 auto 1em;” width=”480″ height=”360″ src=”…” frameborder=”0″ allowfullscreen></iframe>

(For purposes of this question I’ve put … where the YouTube URL goes)

But when Xtreme displays it, it comes out like this:
<div class=”fluid-width-video-wrapper” style=”padding-top: 75%;”>
<iframe id=”fitvid547785″ frameborder=”0″ allowfullscreen=”” src=”….” style=”display:block; margin: 0 auto 1em;”>

Apparently Xtreme thinks it’s being helpful by detecting that I’ve embedded a video and wrapping my iframe in a div that expands it out to the full width of the content area. I understand the theory about responsive web page design, but in my case this is NOT helpful, because the videos are not high-res enough to look good when expanded that far. They look fuzzy this way. They are much better when displayed at the size I specified in my HTML.

How can I disable this automatic fluidizing of my iframes?

[scrambler]

Two things, First you don’t want fixed width ever in a responsive site, but you can prevent over expansion while retaining responsiveness by using CSS styling max-width, and noit width.

Unless you are using the iframe shortcode [iframe…] I don’t know that weaver would be changing your html, @weaver can confirm.

but if you use

<iframe style=”display:block; margin: 0 auto 1em;max-width:480px;” src=”…”

it should do a better job

[drwool]

As a general rule, when I write my own HTML I kind of expect that the theme will respect that I know exactly what I want and not mess around with it.

[drwool]

Actually, this troubles me a LOT.

Yes, there are ways to work around this and make the video appear at the size I want. That’s not the point.

The whole reason I use Weaver is that it gives me such great control over exactly how things should look. Weaver offers tons of admin options to set sizes, colors, styles etc. at a very fine level, and that’s great. But the ultimate control is always being able to write my own CSS and HTML and put my hand-coded stuff into a page to make it look precisely as I want. When Weaver actually overrides my own HTML, I feel that’s a betrayal of everything that Weaver is about. It makes me seriously question whether I want to continue using this theme.

If you’re going to have something in the theme that generates HTML for showing videos in a specific way, put that in a shortcode so I can choose to use it or not. DON’T just go modifying raw HTML that I have put in a page.

[Weaver]

So this is a Video specific issue. And Weaver is following current standard practice for Videos on responsive sites.

So the overriding rule of support a responsive site is that one will almost NEVER use a fixed value for anything to do with a width. Sometimes a fixed px margin is okay, but Weaver Xtreme does not even support that for its “standard” areas. Everything is % based. You can, at any point, wrap things in a max-width:123px; value and get reasonable results.

Back to video – the design used by Weaver Xtreme assumes all videos will be contained in some kind of wrapper with a specific width – a width that will normally be a %.

So if you want a video to be no bigger than some width – it must be enclosed inside a wrapping div with a max-width fixed width. There simply is no way around this in any way shape, or form, that will allow the site to function properly for all other content to presented responsively. This is how responsive design must work. Same for regular old images, as well. I really don’t think it is even possible to write a responsive theme that doesn’t make assumptions about using % for widths. It simply does not work. You CAN combine with max-width rules, but ALWAYS, it must come down to %’s for any responsive theme to be responsive.

Note that WordPress itself does automatic conversion of simple video links to embed codes – I suppose it knows how to ignore videos already embedded, but I’m not 100% sure.

Perhaps the safest way to used videos on Weaver Xtreme is with the Weaver Xtreme Theme Support [video] shortcode.

And do note, that Weaver Xtreme, like many other responsive themes, uses Fitvids to auto-size videos to fit responsively in their containers. I cannot be convinced that any visitor wants to see a video either clipped, or resized using the ugly ugly default iframe resizing. It simply looks awful.

[drwool]

So alright, everything you say makes good sense.

Still, it bugs me that I cannot trust that the theme (or perhaps WordPress itself) won’t fiddle around with HTML I write myself. It seems to me that HTML embedded in a post or page should always simply be output exactly as is, and not transformed into something else by the theme. Even if it doesn’t follow best practices. Even if it’s wrong.

[drwool]

So here’s a thought:   Add a checkbox in Weaver’s admin options called “Don’t touch my junk.”

Leave it turned off by default so anyone who’s already relying on the theme fixing up their crappy HTML won’t have problems. And put whatever dire warning messages around it you feel are appropriate.

[scrambler]

That being said this is the first and only time I heard weaver is doing anything to user’s HTML. usually it is WordPress that does that 🙂

[Weaver]

@drwool –

After re-reading your original post more carefully, I mis-read part of it.

Weaver Xtreme is NOT changing your HTML. It is NOT adding the ‘fluid-width-video-wrapper’ div. I don’t know who is doing that.

But everything else I said about handling content responsively remains true – the actual content of a page, post, or blog page will be wrapped in a <div> with a % width. But this is how every WP theme works – wrapping content, sidebars, etc. in <div>s with some kind of contstraining width.

But most themes, including Weaver II and Weaver Xtreme do not touch the actual HTML in a page’s or post’s (single view) content. Shortcodes are processed, but any other content is not touched. TinyMCE does nasty things with paragraphs and blank lines by default, of course. Weaver has an option to turn that processing off on the per page/post options box.

[scrambler]

I am glad to hear that, as I did not remember weaver changing people’s html.

So you need to deactivate ALL plugins and see if that fixes the issue. If it does reactivate one by one

[Author]

Posts