YouTube Refused to Connect [Solved]

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:

youtube_refuse_toConnect 748×482 8.07 KB

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:
<iframe width="420" height="315" src="https://www.youtube.com/embed/eI4an8aSsgw">
</iframe>
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.
              
I’m getting the same error message on many pages with embedded YouTube videos … but ONLY in Chrome… they look fine in IE, Edge and Firefox. I’m too new to include a link, but to see one of these pages visit Cat(dot)com and then under Support select “Technology & Solutions”.
Thoughts?