どのように私はCodePenは、自分のWebページに埋め込むのですか？

Question

私は（codepen.ioから）私のWebページにCodePenを追加しようとしたが、それは、私はそれが望むように表示されません。それは、テキストを表示するだけです： 'ペンを参照してください... CodePenで'。 The picture I added shows the embed window on CodePen.

私が正しくペンを埋め込むことができますので、それは完全に私のWebページ上に表示さどのように？申し訳ありませんが、これは本当にばかげた質問ですが、私はまだHTMLの完全なnoobです。

Answer 1

、ローカルでこれを使用

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

なぜで

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

を交換するには？

ご覧のとおり、デフォルトスクリプトのsrcは、//assets...で始まります。

URL内のプロトコルが削除され、自動的に自分のものと一致するようになりました。 httpsサイトはスクリプトがhttp URLをロードすることはできませんので、これは、一般的に行われています。

サイトでhttpを使用している場合、スクリプトにはhttpが読み込まれます。あなたのサイトがhttpsを使用している場合、それは、httpsがロードされます。

しかし、あなたのサイトがサーバー上になく、file:///プロトコルで開かれている場合は、あなたのマシン上でそのリソースを見つけることができないため、使用するプロトコルを指定する必要があります。

Answer 2

私は問題を見ていない、あなただけのあなたのCodepenを与えるコードをコピーする必要があります。おそらく、あなたのページがまだオンラインでない場合、私は思ったんだけど

<p>Codepen embed:</p> 
 
    <p data-height="265" data-theme-id="0" data-slug-hash="vGNKNj" data-default-tab="css,result" data-user="blonfu" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/blonfu/pen/vGNKNj/">Modificar color de texto según fondo (stylus)</a> by blonfu (<a href="http://codepen.io/blonfu">@blonfu</a>) on <a href="http://codepen.io">CodePen</a>.</p> 
 
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Answer 3

。私は最近、自分のウェブページにcodepenを埋め込み、私はローカルに自分のコンピュータ上でそれを見ることができなかったことに気づいたが、私は自分のサーバーに自分のhtmlをアップロードしたときに、それがありました。