phone: +44 (0)1706 822 888
e-mail: results@clockcreative.co.uk

Embed YouTube with the iframe method and still retain control

Over Christmas i was asked by a friend how do you embed the video player from Youtube using the iframe method without it sitting on the top of everything in the page and covering up important things like menus.

Now i have never been asked this question before and to be honest i always thought the answer was common knowledge and therefore the reason I had never been asked it. But the person who asked me this question is someone with serious programming pedigree and it made me think, does everyone know you can pass parameters such as ‘wmode’ to YouTube in the iframe URL?

Here is how to do it:

A standard block of code produced by clicking YouTubes embed button will look like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/AwJxQcf426U" frameborder="0" allowfullscreen></iframe>

If you want to tell YouTube to display the video player with wmode=transparent your code should look like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/AwJxQcf426U?wmode=transparent" frameborder="0" allowfullscreen></iframe>

If you want to tell YouTube to display the video player with wmode=transparent and to autoplay your code should look like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/AwJxQcf426U?wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

A full list of other parameters can be found here