Как встроить CodePen на мою веб-страницу?

Question

Я попытался добавить CodePen (из codepen.io) на свою веб-страницу, но он не отображается так, как я этого хочу. Он показывает только текст: «См. Pen ... on CodePen». The picture I added shows the embed window on CodePen.

Как я могу правильно вставить Pen, чтобы он полностью отображался на моей веб-странице? Извините, если это действительно глупый вопрос, я все еще полный noob в HTML.

Answer 1

Чтобы использовать эту функцию локально, замените

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

С

<script async src="http://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 на свой сервер, он был там.