If you're working on the Product Landing Page project, or you just want to add an embedded YouTube video to one of your sites, you might have seen this error:

While it looks bad, the fix is surprisingly easy. To learn how to fix your embedded video, read on.

You code

First, take a close look at your code:

<iframe width="420" height="315" src="https://www.youtube.com/watch?v=eI4an8aSsgw">
</iframe>

Everything looks right at first glance, and the video itself works when you visit the URL in the src attribute.

So what's going on here?

The solution

Turns out that the URL to embed a YouTube video is https://www.youtube.com/embed/VIDEO_ID.

If you change the URL in the src attribute to the scheme above, your embed should work like you expect:

<iframe width="420" height="315" src="https://www.youtube.com/embed/eI4an8aSsgw">
</iframe>

This produces the following output:

Other attributes

But what if you want to start the video at a certain timestamp, or create a playlist of videos to embed?

Check out the YouTube IFrame Player API documentation to see how to do that and more by just adding some parameters to the https://www.youtube.com/embed/VIDEO_ID URL.

In summary

Sometimes bugs can take days or weeks to track down. Other times the answer is as simple as changing a URL. Either way, fixing a bug is always cause for celebration. Maybe watching a short YouTube video is in order?

Stay safe and happy coding (or YouTubing).