htmlcssiframeyoutube

My YouTube video wont show in iframe


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?


Solution

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