I'm writing a site where content is loaded dynamically via jQuery. The reason for this is to leave an audio player running while being able to navigate through page content without refresh.
Ran into trouble trying to get YouTube videos to work, it's setup like this.
Site content is loaded using .load(), and for the videos page it contains an unordered list of links to YouTube videos, and each with an empty <div>
for <iframe>
's. Clicking on a link grows the <li>
and embeds the <iframe>
with the video.
Everything works well except the <iframe>
will not load the source, throwing this error.
Refused to display 'http://www.youtube.com/watch?v=myvideo' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Also tried adding <iframe>
into <li>
with display: none;
with same result.
I thought I understood the javascript same domain policy, but this is beyond me. Googling the error leads me to believe it's something server side? But that doesn't make any sense.
Hard to fiddle something like this, hope it makes sense.
X-Frame-Options:SAMEORIGIN - This means that the page can only be embedded in a frame on a page with the same origin as itself. X-Frame-Options:ALLOW-FROM - The page can only be displayed in a frame on the specified origin. This only works in browsers that support this header.
You can then send a X-Frame-Options response HTTP header with the value: "Allow-From ip-address", where ip address is the remote ip address that is trying to embed content on your server. This will allow your website to be embedded by all websites that are accessed using an ip address from the browser.
Double-click the HTTP Response Headers icon in the feature list in the middle. In the Actions pane on the right side, click Add. In the dialog box that appears, type X-Frame-Options in the Name field and type SAMEORIGIN in the Value field. Click OK to save your changes.
The error means that the document may only be used as iframe inside documents located at www.youtube.com
Use the URL of the embed-code instead:
http://www.youtube.com/embed/myvideo
it will send a X-Frame-Options
-header with a value of ALLOWALL
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With