Invalid Embedded YouTube Code… A Quick Fix!

Alright this is simple, and probably common sense to some, but I thought it was worth a quick entry for anyone scratching their heads.

YouTube spits out this bit if you want to share or embed a video:

<iframe width="420" height="315" src="http://www.youtube.com/embed/RqbWdo536as?rel=0" frameborder="0" allowfullscreen></iframe>

Both the frameborder and allowfullscreen attributes are what make this code invalid according to the W3C.

<iframe src="http://www.youtube.com/embed/RqbWdo536as?rel=0" style="border:none;width:420px;height:315px;"></iframe>

Although I don’t recommend using inline styles (I recommend the style be placed in your stylesheet), by removing the two invalid attributes and using a style in its place I now have W3C valid code… AND I have better control over the iframe as well.  The allowfullscreen attribute does nothing since the full-screen button is in the play bar.  Notice I also moved the size of the iframe into the style as well.  With many videos on a page and a single stylesheet this method will end up saving you a lot of work anyhow.

Why YouTube doesn’t do this by default though goes beyond me.

One comment

  1. Riley says:

    Thankyou Mr. Smith! Champion.

Leave a Reply

Your email address will not be published. Required fields are marked *