[CLOSED] Remove attributes from iframe

[frankmanl]

I use fluidvids (http://toddmotto.com/fluid-and-responsi ... idvids-js/) to scale embedded YouTube movies in a responsive site.
The user copy-pastes You Tube's code

Code: Select all

<__iframe src="http://www.youtube.com/embed/DZSn1Jl7eKo" frameborder="0" width="420" height="315"></__iframe>

so also the attributes width, height and frameborder.
Fluidvids disposes of these attributes, yet my page does not validate: the frameborder attribute on the iframe element is obsolete.
How does this work?
When I inspect the source of the whole page in my browser I indeed find:

Code: Select all

<__iframe src="http://www.youtube.com/embed/DZSn1Jl7eKo" frameborder="0" width="420" height="315"></__iframe>

No wonder I get this validation error.
But when I select part of the page, including this movie and inspect the source of this selection I find:

Code: Select all

<__iframe class=" fluidvids-elem" src="http://www.youtube.com/embed/DZSn1Jl7eKo"></__iframe>

The attributes are gone indeed.
Can anyone explain how this works?
And is there a way to get rid of these attributes completely (apart from not copy-paste them).

Frank

[velden]

There is a major difference between 'looking at source' and 'inspecting (part of) webpage'.

Source will exactly show what the webserver outputs to your browser, and that's what a validator will look at too.

When you use some kind of inspector, you get to see the browser's 'interpretation' of the source. That's very useful for example when some elements are injected with javascript or ajax. Although those elements are not in the source code, you can see them while 'inspecting' the page.

I don't know how you're template look like but personally I don't like editors to paste code like this. I would try to find a way the user only needs to provide the Youtube video ID.

Then build the rest of the iframe around it as you need.

In my opinion that has at least two advantages:

1. should be easy for an editor to just grab the id and paste it in a field
2. you can build the iframe code exactly as you like AND when you want to use another method in the future (let's say you want to show the videos in a Fancybox popup) you only need to change ONE TEMPLATE. In stead of all the iframe code inserted by the editor.

You could also consider creating a simple UDT and explain to the editor to use that one.

E.g. {YouTube video="aBc123"}

[frankmanl]

That explains things to me, thank you.
I could indeed use a UDT as you suggest, but that would only work for YouTube. As soon as the user finds some other movie, it would not.
I'm going to think about it anyway, maybe I can do something with two paramaters instead of just the YouTube ID.