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.
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
So what's going on here?
Turns out that the URL to embed a YouTube video is
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:
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
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).