Я довольно новичок в разметке (хотя это очень легко поднять). Я работаю над пакетом и пытаюсь сделать вики-страницы красивыми в качестве справочного руководства. Я довольно легко могу вставить ссылку на видео YouTube на вики-страницу, но как мне вставить видео на YouTube. Я знаю, что это может быть невозможно.

Я прочитал, что вы можете использовать HTML-теги, поэтому я попытался встраивать с HTML по этой ссылке следующим образом:

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg"
         type="application/x-shockwave-flash"
         wmode="transparent" width="425" height="350" />
</object>

И сохранил страницу, но ничего не произошло.

1. Можно ли вставить видео с YouTube на вики-страницы GitHub?
2. Если так, то как?

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

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Для получения дополнительной информации см. Этот листок Markdown на GitHub.

Полный пример

Расширение на @MGA Ответ «S

Хотя встроить видео в Markdown невозможно, вы можете «подделать его», включив в файл разметки действительное связанное изображение, используя этот формат:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

Объяснение уценки

Если этот фрагмент кода выглядит сложным, разбейте его на две части:

изображение,
![image alt text](https://example.com/link-to-image)
завернутое в ссылку
[link text](https://example.com/my-link "link title")

Пример использования действительной уценки и эскиза YouTube:

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

Код:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

ИЛИ Если вы хотите дать читателям визуальную подсказку о том, что изображение / миниатюра на самом деле является воспроизводимым видео, сделайте собственный скриншот видео на YouTube и используйте его вместо этого в качестве миниатюры.

Пример использования снимка экрана с элементами управления видео в качестве визуальной подсказки:

Код:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

 Явные преимущества

Хотя для этого требуется пара дополнительных шагов ( а ) сделать снимок экрана с видео и ( б ) загрузить его, чтобы вы могли использовать изображение в качестве эскиза, оно имеет 3 явных преимущества :

1. Человек, читающий вашу уценку (или получающуюся HTML-страницу), имеет визуальную подсказку о том, что он может смотреть видео ( элементы управления видео поощряют нажатие )
2. Вы можете выбрать определенный кадр в видео для использования в качестве эскиза (что делает ваш контент более привлекательным )
3. Вы можете указать в видео определенное время, с которого начнется воспроизведение при нажатии на ссылку . (в нашем случае от 35 секунд)

Снятие и загрузка скриншота занимает несколько секунд, но имеет большую отдачу.

Работает везде!

Так как это стандартная уценка, она работает везде. попробуйте это на GitHub, Reddit, Ghost и здесь на переполнении стека.

Vimeo

Этот подход также работает с видео Vimeo

пример

Код

[![Little red riding hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

Ноты:

• Как сделать снимок экрана: http://www.take-a-screenshot.org/ (все платформы)
• Загрузить миниатюру изображения: после того, как вы сделали свой скриншот, вы можете перетащить его на imgur.com, чтобы загрузить и сразу использовать в качестве эскиза.
• Информация о миниатюрах YouTube. Как получить миниатюру видео YouTube из API YouTube?

Официально Markdown не поддерживает встраивание видео, но вы можете встроить в него необработанный HTML. Я проверил с GitHub Pages, и он работает безупречно.

1. Перейдите на страницу видео на YouTube и нажмите кнопку «Поделиться»
2. Выберите Вставить
3. Скопируйте и вставьте фрагмент HTML в уценку

Фрагмент выглядит так:

    <iframe width="560" height="315"
src="https://www.youtube.com/embed/MUQfKFzIOeU" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

PS: Вы можете проверить предварительный просмотр здесь

Если вам нравятся теги HTML больше, чем уценка + выравнивание по центру:

<div align="center">
  <a href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE"><img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT"></a>
</div>

Выровнять видео по центру с помощью эскиза и ссылки:

<div align="center">
      <a href="https://www.youtube.com/watch?v=StTqXEQ2l-Y">
     <img 
      src="https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg" 
      alt="Everything Is AWESOME" 
      style="width:100%;">
      </a>
    </div>

Результат:

Я создал https://yt-embed.herokuapp.com/, чтобы упростить это. Использование является прямым, из примеров выше:

[![Everything Is AWESOME](https://yt-embed.herokuapp.com/embed?v=StTqXEQ2l-Y)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

Приведет к:

Просто позвоните: https://yt-embed.herokuapp.com/embed?v=[video_id] в качестве изображения вместо https://img.youtube.com/vi/ .

• Мы можем использовать HTML-код в Markdown.
• Проверьте официальный документ на странице Вставить видео или плейлист с support.google.com/youtube

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Проверьте больше советов, трюков о YouTube