Has anyone else been getting a long list of validation errors via http://validator.w3.org on site pages that have vimeo videos embed?

I could half-way live with the errors, but it seems that they are the cause of the site theme floating or aligning to the left of the screen on both iPad and Android tablets. The pages on the site without the videos look fine, but any page with the vimeo videos float to the left of the tablet with a small gap on the right side of the screen.

Here are the validation errors I'm getting for every individual video, like:

Line 143, Column 83: end tag for "param" omitted, but OMITTAG NO was specified
Line 146, Column 18: there is no attribute "src"
Line 146, Column 73: there is no attribute "type"
Line 146, Column 111: there is no attribute "width"
Line 146, Column 124: there is no attribute "height"
Line 146, Column 146: there is no attribute "allowfullscreen"
Line 146, Column 152: element "embed" undefined

Comments

RobW’s picture

RobW commented

Can anyone reproduce this issue?

urlM’s picture

urlM commented

I'm also getting some javascript errors like:

Unsafe JavaScript attempt to access frame with URL ... Domains, protocols and ports must match.

And these errors occur for each video embedded on the page. When I turn on the "Aggregate javascript files" option via admin >> config >> development >> performance, then it borks the js on every page containing a vimeo video.

RobW’s picture

RobW commented

The Unsafe JavaScript.... error is common to iframes and usually doesn't cause any problems. For the aggregation issue, can you try updating to 1.x-dev? The only js in dev is to create a Vimeo browser tab in the Media browser (and I don't think it's even functioning right now) -- there's no module js for the display side at all.

urlM’s picture

urlM commented

Thanks Rob. I just updated to 1.x-dev, but the same thing is happening only on pages with the vimeo video. However, I did just notice that everything looks and works perfectly on pages that have the video displayed within the entity - but the pages that I have the videos included within a slideshow (using project/views_slideshow) mess things up when I turn on js aggregation. I'll look into views_slideshow now to see if the culprit might be in there. Thanks again.

urlM’s picture

urlM commented
Priority: Normal » Minor
Status: Active » Closed (works as designed)

Yessir - the js issue is definitely coming from views slideshow 7.x-3.0. I'll continue my search there. Gracias!

RobW’s picture

RobW commented
Priority: Minor » Normal

Yeah, Colorbox/ Media gallery/ Views slideshow integration seems to be a problem with these modules. Sounds like a Views Slideshow issue.

Closing, but feel free to re-open and switch the project to Views Slideshow if you find your problems there.

urlM’s picture

urlM commented
Status: Closed (works as designed) » Active

And in case anyone comes across this thread and is running into the same javascript aggregation bug, then here is the thread about it at the views slideshow project (concerning views_slideshow-7.x-3.0):

http://drupal.org/node/1417048

RobW’s picture

RobW commented
Status: Active » Closed (works as designed)
urlM’s picture

urlM commented
Status: Closed (works as designed) » Active

Well, the javascript aggregation issue has been fixed per this thread: http://drupal.org/node/1290676

However, I'm still getting the HTML validation errors below for each video embedded:

Line 116, Column 17: there is no attribute "class"
Line 116, Column 44: there is no attribute "width"
Line 116, Column 57: there is no attribute "height"
Line 116, Column 67: there is no attribute "src"
Line 116, Column 118: cannot generate system identifier for general entity "title"
Line 116, Column 118: general entity "title" not defined and no default entity
Line 116, Column 123: reference not terminated by REFC delimiter
Line 116, Column 123: reference to external entity in attribute value
Line 116, Column 123: reference to entity "title" for which no system identifier could be generated
Line 116, Column 117: entity was defined here
Line 116, Column 126: cannot generate system identifier for general entity "byline"
Line 116, Column 126: general entity "byline" not defined and no default entity
Line 116, Column 132: reference not terminated by REFC delimiter
Line 116, Column 132: reference to external entity in attribute value
Line 116, Column 132: reference to entity "byline" for which no system identifier could be generated
Line 116, Column 125: entity was defined here
Line 116, Column 135: cannot generate system identifier for general entity "color"
Line 116, Column 135: general entity "color" not defined and no default entity
Line 116, Column 140: reference not terminated by REFC delimiter
Line 116, Column 140: reference to external entity in attribute value
Line 116, Column 140: reference to entity "color" for which no system identifier could be generated
Line 116, Column 134: entity was defined here
Line 116, Column 155: there is no attribute "frameborder"
Line 116, Column 181: "webkitAllowFullScreen" is not a member of a group specified for any attribute
Line 116, Column 200: "mozallowfullscreen" is not a member of a group specified for any attribute
Line 116, Column 215: "allowFullScreen" is not a member of a group specified for any attribute
Line 116, Column 215: element "iframe" undefined

Could it have something to do with this thread on the vimeo forums? http://vimeo.com/forums/topic:11273

Apparently there is a way to manually manipulate the embed code to display with valid HTML per http://www.designlessbetter.com/blogless/posts/how-to-display-video-cont...

If this would fix the validation errors, would there be any way to incorporate the altered embed code into the Media Vimeo module to essentially "fix" Vimeo's embed code? Or would that not make sense?

RobW’s picture

RobW commented

Good links.

So we're not actually adding the object embed code at all in the latest versions of the module -- instead we're using the iframe embed. This allows Vimeo to switch between flash and html5 when it's best, and pushes all of the markup/ validation/ support decisions and workload onto them. Which is cool, because it's their job, and they're probably better at it than me.

I'm in the group that says W3C validation is a guide, not a goal. The Vimeo staffer notes that the code is invalid specifically to support older browsers that didn't implement specs well. Fixing it to validate would probably break support for those browsers, so I think it's best to defer to Vimeo and live with the validation errors.

This is a pretty common occurrence when you're pulling in third party code with an iframe. On our sites we have a small enough scope that we can validate, and use validation as a guideline for what should work, but large companies like YouTube, Twitter, Vimeo, etc., have the resources to test what actually works across the spectrum of browsers in use, including weird edge cases.

urlM’s picture

urlM commented
Status: Active » Closed (works as designed)

Thanks Rob.

urlM’s picture

urlM commented

Well, the site alignment issue on the iPad & Android tablets came from the views_slideshow pagers that I had located outside of the width of the page container... so it definitely wasn't related to the validation errors or vimeo at all. Kind of feel like an idiot now, but happy I found the solution.

So, I fixed it with some simple CSS per http://mysitemyway.com/support/topic/ipad-alignment-of-page

I just added a wrap around my page container, gave it a min-width and overflow: hidden... and now it looks great.

#body-wrap {
	min-width: 1024px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}