Вставить видео на YouTube

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

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

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

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

  • Можно ли встраивать видео на YouTube на github wikim-страницах?
  • Если да, то как?

Ответы

Ответ 1

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

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

Ответ 2

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

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

Хотя встроить видео в Markdown невозможно, вы можете "подделать его", включив в свой файл 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](http//example.io/link-to-image)
завернутый в ссылку
[link text](http//example.io/my-link "link title")

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

Everything Is AWESOME

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

Код:

[![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 секунд)

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

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

Поскольку это 100% стандартная уценка, она работает везде... попробуйте ее на GitHub, Redit, Ghost и, конечно, здесь, на Qaru!

Vimeo

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

Пример

Little red ridning hood

Код

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

Примечание:

Ответ 3

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

Ответ 4

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

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

Ответ 5

Расширение ответов @MGA и @nelsonic и просто попытка сделать это бит легче получить необходимую уценку.

Я принял упомянутые выше предложения и объединил их в небольшую функцию Clay, которая использует URL Youtube и некоторый Image Alt Text и возвращает изображение MarkDown Link, которое вы можете просто вставить в свой Github ReadMe: https://www.clay.run/services/nicoslepicos/github-create-video-embed-mock/code

Будет работать тот, у которого есть элементы управления видеоплеером, как было предложено @nelsonic

Ответ 6

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

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

Ответ 7

Я использовал iframe для встраивания видео YouTube следующим образом:

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>