Вопрос по markdown, youtube, video, github, embed – Вставить видео на YouTube

203

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

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

Is it possible to embed a youtube video on github wikim pages? If so how?
Смотрите такжеstackoverflow.com/questions/4279611/… Brian Burns
Возможно, что вики-страницы github не позволяют & lt; object & gt; теги в целях безопасности. Cypress Frankenfeld

Ваш Ответ

6   ответов
211
Complete Example

Expanding on @MGA's Answer

Хотя его невозможноembed видео в Markdown вы можете & quot;fake it& Quot; в том числеvalid linked-image в вашем файле 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")

Explanation of the Markdown

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

картинка
![image alt text](http//example.io/link-to-image)
завернутый в ссылку
[link text](http//example.io/my-link "link title")

Example using Valid Markdown and YouTube Thumbnail:

Everything Is AWESOME

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

Code:

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

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

Example using Screenshot with Video Controls as Visual Cue:

Everything Is AWESOME

Code:

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

 Clear Advantages

Хотя для этого требуется пара дополнительных шагов (a) taking the screenshot видео и (b) uploading it так что вы можете использовать изображение в качестве эскиза3 clear advantages:

The person reading your markdown (or resulting html page) has a visual cue telling them they can watch the video (video controls encourage clicking) You can chose a specific frame in the video to use as the thumbnail (thus making your content more engaging) You can link to a specific time in the video from which play will start when the linked-image is clicked. (in our case from 35 seconds)

Делать снимок экрана

Works Everywhere!

Так как это100% Standard уценка, этоworks everywhere ... попробуйте на GitHub, Redit, Ghost иof course здесь, на StackOverflow!

Vimeo

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

Example

Little red ridning hood

Code
[![Little red ridning hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")
Notes: How to take screenshot: http://www.take-a-screenshot.org/ (all platforms!) Upload Thumbnail Image: Once you've taken your screenshot you can drag-and-drop it into imgur.com to upload and immediately use it as your thumbnail; couldn't be easier! YouTube thumbnail info: How do I get a YouTube video thumbnail from the YouTube API?
Часть о Vimeo = Спаситель жизни!
@StephenQuan, какой анализатор / платформу уценки вы использовали? мы используем кодwith http или жеhttps на GitHub, например:github.com/dwyl/remote-working где работают видеоизображение и ссылка ...
Недавно я обнаружил, что мне пришлось опустить схему 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

Expanding on @MGA and @nelsonic's answers and just trying to make it a bit easier to get the needed markdown.

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

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

как это работает? Я получаю пустую страницу
-3

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

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>
Когда я использую этот код, ничего не появляется.
Посмотри пожалуйстаgithub.com/sivalabs/sivalabs-hugo/blob/master/content/pages/… и соответствующая страница отображаетсяsivalabs.github.io/videos
322

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

Для получения дополнительной информации смотритеВот, Если вы хотите сохранить простоту, просто сделайте ссылку, используя следующий синтаксис:

[linkname](https://youtubevideourl)

Я отредактировал URL-адреса, чтобы быть https
Iframe не работает для вики-страниц, в настоящее время работает только это решение. Tyler Rinker
Я собрал небольшую функцию, которая позволяет легко генерировать эти типы ссылок Markdown. Вы просто вставляете URL-адрес ссылки на YouTube и альтернативный текст изображения и получаете ссылку Markdown для вставки: хотя вы можете найти ее полезной, не стесняйтесь раскошелиться и изменить:clay.run/services/nicoslepicos/github-create-video-embed-mock
4

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

Уценка неofficially поддерживает встраивание видео, но вы можете встраивать в него сырой HTML. Я проверил сGitHub Pages и это работает без нареканий.

Go to the Video page on YouTube and click on the Share Button Choose Embed Copy and Paste the HTML snippet in your markdown

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

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

Похожие вопросы