Drupal: Embedding Flash SWF in Header with valid XHTML 1.0 Strict!

December 13, 2010

If you’re using an image in website header, but want SWF file in header your Drupal website – then, below is the simple trick to achieve that. Please note: It is a valid XHTML 1.0 Strict! code. 🙂

We all were (not much these days) used to add FLASH animation in to website pages. But, that is not a valid XHTML standard and a very old method.

Recently, for one of my client project – I was asked to put-up a SWF file in header. I wanted to have a valid code – so found this interesting way to do it.

How to do get it done!

Locate your <header> div and find your existing image div for the header. Something like <header-jpeg>

Insert the code below – right after your <header-jpeg> and before closing this </div> tag.

<object type="application/x-shockwave-flash" data="http://yourwebsite.com/myflash.swf" width="884" height="148">  <param name="movie" value="http://yourwebsite.com/myflash.swf" /></object>

So your code for the header part should look like:

<div class="header">
<div class="header-jpeg"></div>
<object type="application/x-shockwave-flash" data="http://yourwebsite.com/myflash.swf" width="884" height="148">
<param name="movie" value="http://yourwebsite.com/myflash.swf" /></object>
</div>

See image here to cross-check how it looks in the code.

Replace “http://yourwebsite.com/myflash.swf” with your own website & path for the SWF to use.

Assign right width & height to the object and you’re good to go.

You should see, Flash file paying in your website’s header. Just if you don’t then, make sure to clear CACHE for your Drupal or WordPress website. You won’t see any changes until clearing the cache.

For Drupal websites: Go to your Drupal administration area. ‘Clear Cache’ under Site Configuration >Performance tab.
For WordPress websites: Go to W3TC or WP Super Cache plugin settings to clear cache. Also – Purge cache from CloufFlare server as well, if using it.

Come back to your homepage and refresh it. Thats all.
If you have any issues, then do let me know through comments.