219

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:

Enter code here

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...

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
doniyor
  • 34,368
  • 52
  • 164
  • 248
  • Here is how Youtube video API works: https://developers.google.com/youtube/player_parameters – SeReGa Feb 01 '21 at 14:02

5 Answers5

519

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>
Yashwardhan Pauranik
  • 5,160
  • 5
  • 37
  • 59
Nyi Ma Lay Win Lae Aye
  • 5,580
  • 2
  • 11
  • 10
  • 146
    For anyone that is wondering, the reason this works is because the /embed endpoint allows outside requests, whereas the /watch endpoint does not. – What have you tried Nov 05 '15 at 14:39
  • 21
    Should really add a WHY in the answer instead of just the piece of code... – Vahx May 13 '17 at 12:28
  • @NyiMaLayWinLaeAye But what if my video src is dynamic? I am stuck to this point – AmarjaPatil4 Jun 18 '18 at 10:21
  • I tried using the "youtu.be" link that I copied from the address bar of the video I wanted to embed -- yes, I changed watch to embed -- but it didn't like that. I changed to youtube.com + the path and it worked. – Glenn Bullock Apr 15 '21 at 16:25
71

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.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
d1jhoni1b
  • 6,723
  • 1
  • 50
  • 32
21

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).

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Popa Andrei
  • 2,083
  • 17
  • 24
5

If embed no longer works for you, try with /v instead:

<iframe width="420" height="315" src="https://www.youtube.com/v/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
rii
  • 1,486
  • 1
  • 17
  • 22
2

Along with the embed, I also had to install the Google Cast extension in my browser. 

<iframe width="1280" height="720" src="https://www.youtube.com/embed/4u856utdR94" frameborder="0" allowfullscreen></iframe>
Raunaq Kochar
  • 974
  • 2
  • 14
  • 23