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

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

github markdown embed youtube video
person Tyler Rinker    schedule 04.08.2012    source источник
comment
См. Также stackoverflow.com/questions/4279611/   -  person Brian Burns    schedule 17.11.2016

Ответы (10)


arrow_upward
579
arrow_downward

Невозможно встроить видео напрямую, но вы можете поместить изображение, которое ссылается на видео 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)
person MGA    schedule 18.04.2013
comment
Iframe не работает для вики-страниц, в настоящее время работает только это решение. - person Tyler Rinker; 11.03.2014

arrow_upward
315
arrow_downward

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

Расширение ответа @MGA

Хотя невозможно встроить видео в 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")

Пример использования Valid Markdown и YouTube Thumbnail:

Все УДИВИТЕЛЬНО

Мы получаем миниатюру прямо с 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")

Очевидные преимущества

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

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

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

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

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

Vimeo

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

Пример

Красная шапочка

Код

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

Примечания:

person nelsonic    schedule 25.04.2015
comment
Недавно я обнаружил, что мне пришлось опустить схему 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") - person Stephen Quan; 22.07.2016
comment
@StephenQuan, какую платформу / парсер уценки вы использовали? мы используем код с http или https на GitHub, например: github.com/ dwyl / remote-working, где работают видеоизображение и ссылка ... - person nelsonic; 06.09.2016

arrow_upward
45
arrow_downward

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

person Daksh Shah    schedule 16.01.2019
comment
Эта стратегия iframe выглядела многообещающей. Однако это не работает в файле моего репо READ.md. - person Adam Hurwitz; 08.12.2019
comment
Это может не работать на README.md, но определенно работает на страницах github. - person Mordred; 01.03.2021

arrow_upward
25
arrow_downward

Я создал 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/.

person M. hasbini    schedule 27.04.2020
comment
Блестяще! Это прекрасно работает. - person Yaakov Bressler; 19.01.2021

arrow_upward
11
arrow_downward

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

person Ivan Berezanskiy    schedule 30.10.2017
comment
Красивое решение. Спасибо! - person Yaakov Bressler; 19.01.2021

arrow_upward
5
arrow_downward

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

<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>

Результат:

введите описание изображения здесь

person Hitesh Sahu    schedule 12.02.2020
comment
Это отличный ответ, потому что его легко автоматизировать! С этой целью шаблон для этой ссылки на изображение - https://img.youtube.com/vi/ID_OF_VIDEO/0.jpg, а API для формирования ссылок на изображения подробно объясняется в этом ответе: stackoverflow.com / a / 2068371/55478 - person Noah Sussman; 25.02.2020

arrow_upward
3
arrow_downward

Добавление ссылки с миниатюрой, которая изначально использовалась YouTube, - это решение, которое работает. Миниатюра, используемая YouTube, доступна следующим образом:

  • если официальная ссылка на видео: https://www.youtube.com/watch?v=5yLzZikS15k
  • тогда эскиз будет: https://img.youtube.com/vi/5yLzZikS15k/0.jpg

Следуя этой логике, приведенный ниже код дает безупречные результаты:

<div align="left">
      <a href="https://www.youtube.com/watch?v=5yLzZikS15k">
         <img src="https://img.youtube.com/vi/5yLzZikS15k/0.jpg" style="width:100%;">
      </a>
</div>

person Vityata    schedule 19.07.2020

arrow_upward
1
arrow_downward

В моем случае в качестве уловки я столкнулся с этой проблемой, преобразовав видео, записанное на моем экране, в GIF с помощью онлайн-конвертера, а затем добавил его в свою уценку следующим образом:

## Quick Overview of the project

![Functional Programming with Javascript using NASA API](./functionJsWithNasaAPI.gif)

Результат был таким, как на изображении ниже

Проверьте это репо для предварительного просмотра пример выше. Надеюсь, этот трюк кому-то поможет :).

Пример использования gif вместо неподдерживаемого видео в уценке

person DINA TAKLIT    schedule 08.07.2021

arrow_upward
0
arrow_downward

Если вы пытаетесь встроить видео на страницу GitHub, все, что вам нужно сделать, это перейти к видео на YouTube, нажать на «Поделиться», скопировать код встраивания (он должен выглядеть так)

<iframe width="560" height="315" src="https://www.youtube.com/embed/Z7PExj_v-ZU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

и вставьте его на свою страницу уценки.

person Lucifer    schedule 25.03.2021
comment
Можно подтвердить, что это работает с модулями рендеринга уценки, которые поддерживают встроенное видео. - person Matthew Muller; 17.07.2021

arrow_upward
-1
arrow_downward

Вы можете попробовать следующее:

<iframe width="500" height="300" src="https://www.youtube.com/embed/<VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
person logbasex    schedule 14.03.2021