Как я могу вставить видео с YouTube на вики-страницы GitHub?


298

Я довольно новичок в разметке (хотя это очень легко поднять). Я работаю над пакетом и пытаюсь сделать вики-страницы красивыми в качестве справочного руководства. Я довольно легко могу вставить ссылку на видео 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. Если так, то как?

4
Возможно, что вики-страницы github не допускают теги <object> в целях безопасности.
Кипарис Франкенфельд

Ответы:


470

Невозможно встроить видео напрямую, но вы можете поместить изображение, которое ссылается на видео 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.


2
Iframe не работает для вики-страниц, в настоящее время работает только это решение.
Тайлер Ринкер

270

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

Расширение на @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!")

Ноты:


2
Недавно я обнаружил, что мне пришлось опустить схему URL http / https в URL, чтобы заставить это работать, то есть[![Everything Is AWESOME](//img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](//www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
Стивен Куан

1
@StephenQuan, какой анализатор / платформу уценки вы использовали? мы используем код сhttp или httpsна GitHub , например: github.com/dwyl/remote-working где видеоизображение и линия связи ...
nelsonic

26

Официально 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: Вы можете проверить предварительный просмотр здесь


Эта стратегия iframe выглядела многообещающе. Тем не менее, он не работает в файле READ.md моего репо .
Адам Гурвиц

8

Если вам нравятся теги 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>


3

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

<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://img.youtube.com/vi/ID_OF_VIDEO/0.jpgи API для формирования ссылок на изображение подробно объясняются в этом ответе: stackoverflow.com/a/2068371/55478
Ноа Суссман

3

Я создал 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")

Приведет к: пример использования yt-embed

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


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.