Advertisement
HTML & CSS

Quick Tip: Insert Flash the Correct Way

by

You create your site the right way. You follow all of the rules, so that in the end, you can proudly have a link to w3's validator, confirming your site's perfection. There's just one problem: if you embed any flash into your page, you'll get several errors. That's because the embed tag is not a valid tag. You need to insert your flash the correct way!

What Not To Do

<embed
src="player.swf"
width="300"
height="300"
allowscriptaccess="always"
allowfullscreen="true"
/>

This is the simplified version. If you generate the default HTML web page directly from flash, it's ten times more ugly. In fact, it just might be longer than this article - Just to embed a single flash file! And it doesn't even do it with valid HTML (in fact 19 errors).

Errors

This is the result. As you can see, there are 6 errors. All 6 from the embed element (5 from the
attributes, and 1 from the tag itself)

What You Should Do

First of all, you shouldn't use the embed tag at all. Forget it! Since we don't have "embed" any more, we're only left with the object tag. It's a good thing that all browsers support it in some way!

Within the Object tag we will use the following attributes:

type=""

data=""

width=""

height=""

We'll need to specify the MIME type of what we're inserting. In this case, we're inserting flash. So for the type attribute, we specify "application/x-shockwave-flash". We declare the source through the data attribute. I think everyone can guess what the width and height attributes do. So this is how you should insert your flash, for validity:

<object
type="application/x-shockwave-flash"
data="flash.swf"
width="750" height="400">
<param name="movie"
value="flash.swf" />
</object>

You still need the <param> tag as well. Let's test this new code now:

Validated

Final Words

Isn't that "congratulations page" just so...validating? No pun intended. Anyway, I hope you found this to be useful, and have a great week!

Related Posts
  • Code
    Web Development
    Using Polymer to Create Web ComponentsPolymer wide retina preview
    Polymer will help you to easily create Web Components for your web apps, using a similar syntax to HTML.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…