HTML5 Youtube videos not working in Google chrome

This is a really quick post as i’ve been coding for a few hours and need to call it a day…

So i was working on my new website which uses a lot of HTML5, CSS3 etc. and shows Youtube videos, so naturally I wanted to use the Youtube HTML5 embed method (which i still don’t really like as it’s an ugly iframe). I was using some of the newer HTML5 iframe attributes in an effort to be “clever”, once of which was the sandbox attribute. The reason for using this was to add as much security as i could since Youtube is a third-party website and i take that risk seriously – i have no control over their content.

Anyway, to cut a long story short, the youtube videos worked fine in Firefox 11 but not in Chrome. I tried disabling all sorts of CSS, JS etc. but it finally occurred to me i should look at the Youtube iframe markup so i naturally removed the attributes i was least familiar with and hey presto, removing the sandbox iframe attribute cured the problem.

Thinking about this a little further, it’s pretty obvious that the HTML5 iframe sandbox attribute would break the Youtube video since it imposes some severe restrictions on the iframe. I wanted to share this in the hope it saves someone else some time.

Cheers!

UPDATE: I’d imagine from a quick look that the same goes for Safari which also supports the HTML5 iframe sandbox attribute, most other browsers currently don’t