While validating my not be a big issue to some people, I personally want my page to validate whenever possible, as I feel it's a good habit to code properly whether the compiler/browser/person reading your code understands anyways.
Anyways, I'm building a website for a client that is requesting a YouTube video of theirs be embedded in the page. Easy, I grab the code from YouTube and throw it in the page. It works of course, but the page now doesn't validate under XHTML 1.0 Strict solely because of the YouTube-generated code.
The part that doesn't validate is the embed portion, and it works fine without this line in Chrome, but breaks in Firefox/IE. If it was just IE I'd just shrug it off as IE being terrible as per usual, but being as Firefox is doing it as well I'm wondering how to approach the situation. I could just dynamically input the content based on the browser, therefore validating, but that seems sloppy.
Am I fighting a losing battle and should just ignore the fact that this page doesn't validate because of this snippet?
Not actual video, just example code
<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US"
width="480" height="385">
<param name="movie"
value="http://www.youtube.com/v/oHg5SJYRHA0?fs=1&hl=en_US"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
</object>
That should work on IE, Firefox, Opera, Safari and Chrome.
The data attribute of <object> and the movie parameter must both be present and must have the same value.
In IE this prevents the SWF from streaming and, for example, presenting a pre-loader, but that should be a non-issue for YouTube.
For more, and for a fix for that last problem, see Flash Satay: Embedding Flash While Supporting Standards.
I think if you use swfobject you could get it to validate.
http://code.google.com/p/swfobject/
The <embed> tag is new to HTML5 and it's quite possible that the validator you are using is not fully up-to-date. All of that code should be quite fine in XHTML 1.0 strict.
I'm afraid the above answers still cause validation to fail on W3C. Here's a solution which works for xhtml strict;
<object type="application/x-shockwave-flash" data="https://www.youtube.com/v/YourVideoID" width="100%" height="100%"></object>
Related
Gofundme gave me the following widget code to add to my webpage, however it doesn't appear on my page. I think that it might have something to do with the embed tag as my design software states that "In HTML 4.01 Transitional the tag is not permitted." Could that be the problem?
Here's the code they sent me:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="258" height="338" title="Click Here to donate!" type="application/x-shockwave-flash"><param name="movie" value="/Widgetflex.swf"><param name="quality" value="high"><param name="flashvars" value="page=drum-lessons-for-indigent-students&template=6"><param name="wmode" value="transparent"><embed allowScriptAccess="always" src="/Widgetflex.swf" quality="high" flashVars="page=drum-lessons-for-indigent-students&template=6" type="application/x-shockwave-flash" wmode="transparent" width="258" height="338"></embed></object>
Kokesh is right, there are some issues with flash in some instances but the real issue with the gofundme widget has to do with how it's written for you to copy and paste. It's looking for a local file.
This tutorial should help with getting it to work using a workaround.
http://manicpixieropedoll.blogspot.com/p/gofundme-n.html
It is a Flash object. Flash is on it's way out and already blocked in Chrome. Do they provide some more civilized solution? I actually found your question as this happened just now to my wife.. I will look for solutions, but unless GoFundMe provides other widget, I'm not sure what to do.
I am using the xhtml valid way to embed below:
<object type="application/x-shockwave-flash" width="640" height="360" data="youtube-video-url">
<param name="movie" value="youtube-video-url" />
<param name="allscriptaccess" value="always" />
<p>Adobe Flash is required to view this content. Please download Flash Player.</p>
</object>
When I view it in IE without flash installed, I just get a black box and no alternate content. If I take out the type="application/x-shockwave-flash" attribute, the alternate content will appear. Why is it not showing the alternate content when the type attribute is specified and how do I correct this?
IE doesn't support fallback of the object element. What you describe should happen but IE is well, IE. You could use SWFObject to embed the flash if you really like a fallback.
Try removing the data parameter from the tag. It will work that way. Then if you put it back, you will notice that you might not be able to reproduce this issue. Also, try removing and using only data. You will find the possibilities interesting.
I never did find a solution to this problem. It only happened in Windows XP when the type was set to "application/x-shockwave-flash".
Various sites, such as flickr.com for video, or soundcloud.com, use an object tag with a nested embed tag. Based on quite a bit of testing, I've concluded that these sites only work with the nested or stand-alone embed tag, but not with the equivalent object tag syntax. Here's an example:
This works
<embed
type="application/x-shockwave-flash"
src="http://www.flickr.com/apps/video/stewart.swf?v=71377"
bgcolor="#000000" allowfullscreen="true"
flashvars="intl_lang=en-us&photo_secret=564da38fcc&photo_id=2454294841"
height="300" width="400"
>
</embed>
This does not
<object
type="application/x-shockwave-flash"
width="400"
height="300"
data="http://www.flickr.com/apps/video/stewart.swf?v=71377"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
>
<param name="flashvars" value="intl_lang=en-us&photo_secret=564da38fcc&photo_id=2454294841"></param>
<param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=71377"></param>
<param name="bgcolor" value="#000000"></param>
<param name="allowFullScreen" value="true"></param>
</object>
What's going on?
In this form, your plain object tag will be ignored by all browsers except for IE, which is capable of reading a badly formed object tag. The embed tag is read by all other browsers.
To make all browsers read the object tag, and so make the embed tag redundant, you need to mess around with the object tag properties a bit to make it correctly validate. A better (but slightly old) write up of this is available on A List Apart.
Really though, I still recommend not writing the object tags yourself, and instead let SWFObject do the hard work for you.
Something like below,which is complicated to figure out what it exactly means:
9.<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="945" height="102">
10.
11. <param name="movie" value="66.swf" />
12.
13. <param name="wmode" value="transparent" />
14.
15. <EMBED height="60" pluginspage="http://www.macromedia.com/go/getflashplayer" src="66.swf" type="application/x-shockwave-flash" width="468" wmode="transparent" quality="high"></EMBED>
16.
17.</object>
Use swfobject and stop worrying about it. Let the library handle the flash embedding.
Various browsers require various embedding techniques for various reasons, and we as application developers shouldn't need to worry about the arbitrary details.
<object> isn't really old-fashoned, however using all-caps for tags like the <EMBED> you've got there is. It isn't valid XML, or valid XHTML for that matter. (Then again, doing object/embeds for flash causes validation errors with the W3C XHTML Strict validator anyway... :)
If you call things like youtube old fashioned, then yes.
Try here
I'm using the following code to display a YouTube video.
<object width="425" height="344">
<param name="movie"
value="**URL**">
</param>
<param name="allowFullScreen"
value="true">
</param>
<embed src="**URL**"
type="application/xshockwave-flash"
allowfullscreen="true"
width="425"
height="344">
</embed>
</object>
It works in Firefox, but why doesn't it in Internet Explorer?
I'm a totally new to web development, so I'm running into all these wonderful inconsistencies that you veterans are used to ;)
To elucidate, it doesn't work because the object tag is incomplete. Firefox gives up on the object element and uses the fallback old-school embed element instead. IE doesn't support embed so you get nothing.
An object element must at least have a type attribute telling it what plugin to use and a data attribute telling it what to send the plugin. In IE you also need to mirror the data attribute in a <param name="movie"> value inside the object because it runs plugins differently.
IE won't ‘stream’ partially-loaded Flash files this way though. To get that, you have to use an ActiveX classid instead of the type to tell it which plugin to use. If you care about this (and you might not: for small files, stub loaders, and files that are useless until complete, it makes no difference) then you have to start serving combinations of nested objects or embeds, which quickly becomes confusing.
Try this:
<object type="application/x-shockwave-flash" data="VID_URL" width="425" height="344">
<param name="movie" value="VID_URL" />
</object>
Previously wasted a few hours working through the same issue. Different cause though...
For IE9, YouTube embeds (at least iframes) were not working because I had previously added Tracking Protection to IE for Google ad servers. In this case, I had to disable the tracking protection (Safety > Tracking Protection) or click the button immediately to the right of the address bar ('Some content is filtered on this site') that alerts end users to filtered content.