Быстрый совет: встраивание видеороликов YouTube в страницы GitHub

Страницы GitHub — это отличный способ разместить некоторые из ваших материалов в Интернете. Все, что вам нужно сделать, это написать несколько файлов разметки и указать GitHub создать их в виде страницы.

Проблема заключается в том, что вы не можете просто добавить HTML в свои разметки, чтобы, например, вставить видео с YouTube. Это сработает, если вы включите только iframe YouTube, но если вы работаете с профессиональными репозиториями разметки, это будет воспринято как ошибка или проблема безопасности.

Обходной путь, который многие используют, — это вставка предварительного просмотра видео по ссылке:

Если ваш URL YouTube — https://www.youtube.com/watch?v=JLMbpiywVxQ, то важной частью является ID после v=, в данном случае JLMbpiywVxQ.

Затем вы можете использовать следующую разметку для вставки ссылки на видео с его предварительным изображением. YouTube автоматически создает эти изображения предварительного просмотра.

[![Final video of fixing issues in your code in VS Code]
(https://img.youtube.com/vi/JLMbpiywVxQ/maxresdefault.jpg)]
(https://www.youtube.com/watch?v=JLMbpiywVxQ)
Вход в полноэкранный режим Выйти из полноэкранного режима

Если, однако, вы хотите встроить видео в файлы уценки, вам нужно сделать немного больше.

  1. Перейдите в корень вашего репозитория GitHub с файлами разметки и создайте папку _includes.
  2. В этой папке создайте файл youtube.html. Вставьте этот HTML и CSS и сохраните его.
<div class="embed-container">
    <iframe width="640" height="390" 
    src="https://www.youtube.com/embed/{{ include.id }}" 
    frameborder="0" allowfullscreen></iframe>
</div>
<style>
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь вы можете встраивать любое видео с YouTube в свои файлы разметки, используя следующее:

{% include youtube.html id="JLMbpiywVxQ" %}  
Войти в полноэкранный режим Выйти из полноэкранного режима

При этом ID будет идентификатором YouTube.

Вы можете увидеть это в действии и форкнуть демо-репозиторий youtube embed, если не хотите делать это вручную.

Оцените статью
devanswers.ru
Добавить комментарий