@fehde (ふぇーで)posted at 2021-01-05

Qiita記事へのCodepen埋込みのやり方

Q&A

codepen

解決したいこと

Qiitaの記事でCodepenを埋め込みたいのですが、上手く行きませんので解決方法をご教授頂ければ幸いです。

発生している記事

https://qiita.com/genbu-jp/items/0008ac54d389fd67efdc
(Markdown)

該当するコード

https://codepen.io/genbu-jp/pen/ZEpvxVP

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="genbu-jp" data-slug-hash="ZEpvxVP" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="noUiSliderDateSliderSample"><span>See the Pen <a href="https://codepen.io/genbu-jp/pen/ZEpvxVP">noUiSliderDateSliderSample</a> by genbu-jp (<a href="https://codepen.io/genbu-jp">@genbu-jp</a>) on <a href="https://codepen.io">CodePen</a>.</span></p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

自分で試したこと

他の方の記事を参考に、Codepenの「Embed」→「HTML(recommended)」のコードをQiitaのMarkdownに貼り付け、改行削除したり色々試しましたが上手くいきませんでした。他の方は上手く埋め込まれているようなので何が誤っているのでしょうか。

1 likes

1Answer

@uasi posted at 2021-01-05

埋め込みコードの

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

部分を

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

に変えると動くようになります。

Qiita はおそらく記事内の script タグをホワイトリスト式で許可しています。CodePen が生成する埋め込みコードの script タグの URL がいつからか変更されたせいで、スクリプトが読み込まれなくなったのだと思います。

3Like

Comments

@fehde
Questioner
ご回答ありがとうございました！

ご指摘頂いた点を変更したら上手く動作しました。
scriptタグのURLが変更されていたのは盲点でした。。

Are you sure you want to delete the question?