I'm embedding a youtube vid into a webpage using jQuery. Why? Because I want valid HTML markup.

So here's what I'm doing:
  var youtube = $('#youtube a').attr('href').match(/http:\/\/youtu.be\/(.+)/)[1];
  $('#youtube').append('<iframe width="560" height="315" src="http://www.youtube.com/embed/' + youtube + '" frameborder="0" allowfullscreen></iframe>');
The HTML markup is as follows:
<div id="youtube">
  <a href="http://youtu.be/dr0tCny046Q">New Video - Not Tonight</a>
And I'm getting the following error message:
Unsafe JavaScript attempt to access frame with URL http://www.heycarrianne.co.uk/ from frame with URL http://www.youtube.com/embed/dr0tCny046Q. Domains, protocols and ports must match.

What gives? Don't really understand why this is unsafe. Not sure what to do about it.