Embed YouTube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' [duplicate]
I am trying to feed my Django page with some resource I am getting from somewhere else.
Inside the feed, I have YouTube videos with URL like: https://www.youtube.com/watch?v=A6XUVjK9W4o
Once I added this into my page, the video does not show up, saying:
Refused to display 'https://www.youtube.com/watch?v=A6XUVjK9W4o' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Then I said, well, what if I change watch
to embed
. Then YouTube player shows up, but no video, saying:
How can I get this to work?
I am showing it in HTML like this:
<iframe width="420" height="315"
src="{{vid.yt_url}}">
</iframe>
I googled almost for an hour, but no sign of success. I tried to append &output=embed
- nada...
You must ensure the URL contains embed rather watch as the /embed
endpoint allows outside requests, whereas the /watch
endpoint does not.
<iframe width="420" height="315" src="https://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>
The YouTube URL in src
must have and use the embed
endpoint instead of watch
, so for instance let’s say you want to embed this YouTube video: https://www.youtube.com/watch?v=P6N9782MzFQ
(browser's URL).
You should use the embed
endpoint, so the URL now should be something like https://www.youtube.com/embed/P6N9782MzFQ
. Use this value as the URL in the src
attribute inside the iframe tag in your HTML code, for example:
<iframe width="853" height="480" src="https://www.youtube.com/embed/P6N9782MzFQ" frameborder="0" allowfullscreen ng-show="showvideo"></iframe>
So just replace https://www.youtube.com/watch?v=
with https://www.youtube.com/embed/
and of course check for your video's ID. In this sample, my video ID is P6N9782MzFQ
.
You only need to copy <iframe> from the YouTube Embed section (click on SHARE below the video and then EMBED and copy the entire iframe).