YouTube動画埋め込み時に「www.youtube.com で接続が拒否されました。」が表示された際に確認すること

YouTube動画をウェブサイトに埋め込んで表示させようとした際に「www.youtube.com で接続が拒否されました。」というメッセージが表示されたことはありませんか？

つい先ほど地味にハマったので原因をメモとして残します。

埋め込まず直接ブラウザで見るURL

- YouTube

YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

www.youtube.com

※「AGxAGxAGx」はダミーです

サイトに埋め込んで表示するURL

YouTube

www.youtube.com

※「AGxAGxAGx」はダミーです

エラーが出た原因

以下に正常に表示出来るコードとエラーになるコードを書きましたが、原因は単純で埋め込み用のURLとブラウザで直接視聴するURLは異なっており iframe で埋め込んで表示する際に、ブラウザで直接視聴するためのURLを入れてしまっていたことが原因でした。

正常に埋め込み表示が出来るコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/AGxAGxAGx" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

エラーになるコード

<iframe width="560" height="315" src="https://www.youtube.com/watch?v=AGxAGxAGx" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>