WordPressでCodePen埋め込みエラーを解決する方法

2016.03.17

WordPressの埋め込み機能により、URLを本文中に書くだけで、自動的にYouTubeなどのコンテンツが埋め込み表示されるようになりました。

CodePenも埋め込みに対応していますが、そのままURLを書いただけでは、プレビュー画面がエラーになってしまいます。

↓Result画面がエラー表示「Our Bad. Probagly. 404(Page Not Found)」になる。
cap001

CodPrenを埋め込みで表示するためには、「CodePen oEmbed」というプラグインをインストールする必要があります。

cap002

CodePen oEmbedは、インストールして、有効化するだけで大丈夫です。細かい設定などは必要ありません。

↓プラグインを入れたら、無事、Result画面が表示できました。

http://codepen.io/meowwwls/pen/jqyOqm
codepen.io

プラグインをインストールしてもエラー表示が解消しない場合は、CodePenを表示する投稿のURLを変更して（新規投稿として）、再度埋め込みを行ってみてください。

一度、エラーになった後にプラグインを有効化すると、エラーになったURLでは、しばらくエラーのままになることがあるようです。

ちなみに、埋め込んだCodePenの横幅が小さくなってしまう場合には、iframeにwidth:100%;かmax-width:100%;を指定しましょう。

iframe {
  width: 100%;
}