YouTube動画埋め込み時に「www.youtube.com で接続が拒否されました。」が表示された際に確認すること
YouTube動画をウェブサイトに埋め込んで表示させようとした際に「www.youtube.com で接続が拒否されました。」というメッセージが表示されたことはありませんか？
つい先ほど地味にハマったので原因をメモとして残します。
目次- 埋め込まず直接ブラウザで見るURL
- サイトに埋め込んで表示するURL
- エラーが出た原因
- 正常に埋め込み表示が出来るコード
- エラーになるコード
埋め込まず直接ブラウザで見るURL
YouTube作成した動画を友だち、家族、世界中の人たちと共有www.youtube.com※「AGxAGxAGx」はダミーです
サイトに埋め込んで表示するURL
YouTubewww.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>