22

Here is the code I entered in my HTML

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

The video frame will show, but the actual video won't load or even show up. I have tried waiting, so it shouldn't be a loading issue.

I also am currently only using HTML and CSS

Any ideas on how I can get this to work?

apokryfos
  • 38,771
  • 9
  • 70
  • 114
jdavid
  • 233
  • 1
  • 2
  • 5
  • 1
    For embedding YouTube videos, you should use YouTube's custom embedding code which you can find below most videos on the YouTube web page. – jojonas Mar 31 '16 at 15:25
  • Is There any way to get around certain channels copyright feature? – jdavid Mar 31 '16 at 15:31
  • The embedded URL @jojonas is referring to looks something like this: www.youtube.com/embed/ – Victor Aug 04 '20 at 17:52

4 Answers4

42

YouTube doesn't allow 3rd parties to embed their site directly like that. Using 

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

will raise an error Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. to indicate this (you should really check the console for these things).

Fortunately Youtube offers the "embed video" option, which you need to use in order to embed videos.

Your linked video for example would produce the iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
apokryfos
  • 38,771
  • 9
  • 70
  • 114
  • Having the same issue, however even the embed does not work. This works fine in a browser however in and Android Webview I get a message in the video window before it plays stating that an error occurred however there is nothing in the logs – justdan0227 Oct 23 '17 at 12:15
  • @justdan0227 That sounds like a different question. Does you app have internet access permissions set? – apokryfos Oct 23 '17 at 12:18
  • Any idea about this one: https://stackoverflow.com/questions/54470420/flutter-web-view-secure-origin – skjagini Feb 01 '19 at 03:59
23

Change watch?v= to embed/

The easiest way to get the correct link is to right-click on the YouTube video and select copy embed code.

<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
Tharindu Lakshan
  • 3,995
  • 6
  • 24
  • 44
user3467534
  • 231
  • 1
  • 5
0

I am late to respond but here what I used to convert the youTube url to Embed and make the video work.

function getVideoId(url) {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url?.match(regExp);

    return (match && match[2].length === 11)
      ? match[2]
      : null;
}
    
const videoId = getVideoId('https://www.youtube.com/watch?v=fB4Ca1iTii8');
const iframeMarkup = '<iframe src="https://www.youtube.com/embed/' 
    + videoId + '" frameborder="0" allowfullscreen></iframe>';

console.log('Video ID:', videoId) // fB4Ca1iTii8
console.log("https://www.youtube.com/embed/" + videoId)
Vahe Nikoghosyan
  • 429
  • 6
  • 6
0

Make sure your URL has the embed included. A normal youtube Link causes that problem.

Jerrell-Abrahams
  • 31
  • 4
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34805888) – XMehdi01 Aug 10 '23 at 22:25