embed youtube video - Refused to display in a fram

问题:

This question already has an answer here:

• Embedding youtube video “Refused to display document because display forbidden by X-Frame-Options” 2 answers

I am trying to feed my django page with some resource I am getting from somewhere else.

inside feed, I have youtube videos with url like: https://www.youtube.com/watch?v=A6XUVjK9W4o

once I added this into my page, video doesnot 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:

does anyone have a clue how I get this to work?

I am showing in html like this:

<iframe width="420" height="315"
    src="{{vid.yt_url}}">
</iframe>

I googled almost for an hour, no sign of success. I tried to append &output=embed.. nada..

回答1:

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>

回答2:

Youtube url in src must have and use embed endpoint instead of watch so for instance lets say you want to embed this youtube video https://www.youtube.com/watch?v=P6N9782MzFQ (browser's url) you should use embed endpoint so the url now should be something like https://www.youtube.com/embed/P6N9782MzFQ, use this value as 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

回答3:

You only need to copy from youtube Embed section (click on SHARE below the video and then EMBED and copy the entire iframe)

回答4:

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>

回答5:

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>