This past week, i’ve been embedding YouTube video’s into some of my designs/templates at work and i’ve started noticing a few little problems when doing this. The biggest problem that i’ve come across was when you’ve embedded a YouTube player into a template that contained some other z-indexed elements. There was one example where i made a hover over image gallery based around an unordered list thumbnail grid. If you hovered your mouse over the thumbnail a larger version of that image would show above the rest of the images using z-index and position css elements (i’ll post this code up soon).

The problem reared its head when i had to add a video underneath the gallery. For some reason in Firefox on Windows, the video was always showing above the hovered image and i tried a few different CSS properties to try and fix this. With no joy on this front i started looking for ways to fix the video itself. I read about a few different fixes but none of them seemed to work. Then i read about a certain fix that changes the YouTube video parameters so that the actual player is opaque and it worked.

So here’s the code:

<object width='640' height='480'>
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'>
    <param name='type' value='application/x-shockwave-flash'>
    <param name='allowfullscreen' value='true'>
    <param name='allowscriptaccess' value='always'>
    <param name="wmode" value="opaque" />
    <embed width='640' height='480'
        src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
        type='application/x-shockwave-flash'
        allowfullscreen='true'
        allowscriptaccess='always'
        wmode="opaque"
        ></embed>
</object>

This fix worked for my problem because from what i’ve read, it changes the player into being an opaque window so that the z-index on whatever else will work properly. I’ve not got the best knowledge in the world when it comes to this kind of thing but i thought it was worth sharing because its a really easy fix for something that was really annoying and time consuming for me.

Hope it helps :)

I’ve not designed and built anything for myself to stretch my wings for a long while, so i decided to put together a new blog dedicated to all things fixed gear, the main reason for this is because of my new found hobby obsession with fixie’s.

The internets is awash with awesome Fixed Gear Companies / blogs / photos / videos / clothing etc… and i wanted a place (other than my RSS) to keep a bunch of the stuff that i like. So i created ‘Deaf Pigeon‘… My very own fixed gear ‘blog’. It’s more of a resource for me to keep stuff that i like relating to fixed gear bikes and riding.

It’s only in it’s infancy at the moment, but i’ve already got 2 other authors (not including myself) who update the blog with things that they find online aswell. If you want to join in, just get in touch and i’ll sort you out with a login!

There is a page with a big bunch of links on there aswell so that it’s easy to keep track of fixed gear companies and other sites that are online. Also a really good what to keep track of local fixed gear rides and events.

I’ve already started to pool a selection of my favorite fixed gear bikes, this way i can look back over the bikes that have inspired mine. If you’ve got a photo of your bike and you want it put on there then don’t hesitate to send it over!

Check it out here…

Deaf Pigeon

It’s no secret that i love using Coda as my personal preference for editing and coding websites. I’ve been using it for probably the past 4 years avidly and it’s never put a foot wrong. Everything that i need plus more.

But it’s only really been for the past maybe year to 18 months that i’ve been using all of the little functionality and productivity features that Coda possesses. Things like the books feature, where i can integrate reference material for different elements of web design that i’m not fully proficient in, and the main one that i’ve been loving recently ‘Clips’.

Clips aren’t something that only Coda has integrated into it, i know this because recently i have been trying out TextMate to see what all the fuss is about. Code snippets are a pretty big selling point on the TextMate front, from what i’ve read Most of the other web developers and designers that i know, use TextMate as their preference.

HTML 5

As people who read this blog will know, when i redesigned my personal site, i chose to learn and use HTML5 as the Doctype. After building a few pages i decided to make a HTML 5 basic page structure Clip for Coda.

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title></title>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />

</head>

<body>

<!-- Content -->

</body>

</html>

< head > Clips

I also made some basic clips for people who are starting out in Coda and also starting out in the web design world aswell to get an idea of how certain elements should be written or they could be used by people already comfortable with code just to speed things up when working.

These clips below have been written to contain selection placeholders, which mean that if you just type ‘css/basic.css‘ into the head of your page (or whatever yours is called) but without the element tags around it and you will be able to use my clip by highlighting the whole element (which you would like the tags to appear around) and then select on the clip you require. This will then replace the selection placeholder, with the selection you made on screen. If you have any issues with these or problems using them, please get in touch.

<link type="text/css" rel="stylesheet" href="*" media="all" />

<script src="*" type="text/javascript"></script>

<link rel="apple-touch-icon" href="/apple_touch_icon.png" />

<!-- [if IE]>
	<link type="text/css" rel="stylesheet" href="*" mce_href="*" media="screen" />
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="*" />

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

I can’t say which is better or worse as a whole package because each person is different, but for me personally, Coda is definitely where i’m most comfortable.

Click the icons to the left to download, then open each clip with coda to install clips and then select using the Clips menu at the bottom of your editor window

I updated the blog template in the front and back aswell, to align it with the main site. It’s still not 100% finished, due to me still learning more and more about HTML 5. So i’ll be updating the code side of my site more often than the design as this is where i need to make the most effort at the moment.

There will be some pretty awesome icon releases in the very, very near future aswell so i hope you grab those when they come out. They shouldn’t be too far off now to be honest, i’m just putting the finishing touches to them after i finish typing this.

My blog has been something that i’ve never really had much time for but i plan on keeping it up to date this year, now that i have got my site how i wanted it in the first place. Not that i’ve got much of anything interesting to say, just that it’s something that i’ve always wanted to do but never had the time or patience for. My head has always told me not to write about every little thing that happens to me, but then i suppose twitter has ruined that thought path for me :D

Right then… time for me to get these icons finished and hopefully put this new site live…

Hope you all like it?

Any feedback is welcomed and if you find something wrong or broken, then please don’t hesitate to tell me… I’ll get it sorted as soon as possible.

Thanks…