Wie kann ich ein YouTube-Video auf GitHub-Wiki-Seiten einbetten?

Question

Ich bin ein ziemlicher Neuling auf dem Gebiet des Markup (obwohl es sehr leicht zu erlernen ist). Ich arbeite an einem Paket und versuche, die Wiki-Seiten so zu gestalten, dass sie wie ein Hilfehandbuch aussehen. Ich kann einen YouTube-Video-Link ganz einfach in die Wiki-Seite einfügen, aber wie bette ich ein YouTube-Video ein? Ich weiß, dass das vielleicht nicht möglich ist.

Ich habe gelesen, dass man HTML-Tags verwenden kann, also habe ich versucht, mit HTML wie folgt einzubetten enlace wie folgt:

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

Ich habe die Seite gespeichert, aber es ist nichts passiert.

1. Ist es möglich, ein YouTube-Video auf GitHub-Wiki-Seiten einzubetten?
2. Wenn ja, wie?

Answer 1

Es ist nicht möglich, Videos direkt einzubetten, aber Sie können ein Bild einfügen, das auf ein YouTube-Video verweist:

[![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)

• Weitere Informationen über Markdown finden Sie unter dieses Markdown Cheatsheet auf GitHub.
• Für weitere Informationen über Youtube-Bildlinks siehe diese Frage .

Answer 2

Vollständiges Beispiel

Ausweitung der @MGA 's Antwort

Es ist zwar nicht möglich, die einbetten ein Video in Markdown zu erstellen, können Sie es "vortäuschen", indem Sie ein gültiges verlinktes Bild in Ihre Markup-Datei einfügen und dieses Format verwenden:

[![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")

Erläuterung des Markdowns

Wenn dieses Markup-Snippet kompliziert aussieht, unterteilen Sie es in zwei Teile:

ein Bild
![image alt text](https://example.com/link-to-image)
in einen Link eingewickelt
[link text](https://example.com/my-link "link title")

Beispiel mit Valid Markdown und YouTube Thumbnail:

Wir beziehen das Vorschaubild direkt von YouTube und verlinken auf das eigentliche Video, so dass die Person, die auf das Bild klickt, zum Video weitergeleitet wird.

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 Wenn Sie den Lesern einen visuellen Hinweis geben wollen, dass das Bild/die Miniaturansicht tatsächlich ein spielbar Video, machen Sie einen eigenen Screenshot des Videos in YouTube und verwenden Sie diesen als Miniaturansicht.

Beispiel für einen Screenshot mit Videosteuerung als visuellen Hinweis:

Code:

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

  Klar Vorteile

Dies erfordert zwar ein paar zusätzliche Schritte ( a ) Bildschirmfoto machen des Videos und ( b ) Hochladen der Datei damit Sie das Bild als Vorschaubild verwenden können, hat es 3 klar Vorteile :

1. Die Person, die Ihren Markdown (oder die resultierende HTML-Seite) liest, hat eine visueller Hinweis dass sie sich das Video ansehen können ( Video-Kontrollen regen zum Klicken an )
2. Sie können eine spezifischer Rahmen im Video als Vorschaubild zu verwenden (so wird Ihr Inhalt einnehmender )
3. Sie können Verbindung zu einer bestimmten Zeit im Video, ab dem die Wiedergabe beginnt, wenn das verlinkte Bild angeklickt wird (in unserem Fall ab 35 Sekunden)

Das Aufnehmen und Hochladen eines Screenshots dauert nur ein paar Sekunden, ist aber von großem Nutzen.

Funktioniert überall!

Da es sich um Standard-Markdown handelt, funktioniert es überall. Probieren Sie es auf GitHub, Reddit, Ghost und hier auf Stack Overflow aus.

Vimeo

Dieser Ansatz funktioniert auch mit Vimeo-Videos

Ejemplo

Code

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

Anmerkungen:

• Wie man einen Screenshot macht: http://www.take-a-screenshot.org/ (alle Plattformen)
• Thumbnail-Bild hochladen: Sobald Sie Ihren Screenshot aufgenommen haben, können Sie ihn per Drag-and-Drop in das imgur.com hochladen und sofort als Miniaturbild verwenden
• YouTube-Infos zur Miniaturansicht: Wie erhalte ich eine YouTube-Video-Miniaturansicht von der YouTube-API?

Answer 3

Markdown funktioniert nicht offiziell unterstützen keine Videoeinbettungen, aber Sie können rohes HTML darin einbetten. Ich habe getestet mit GitHub-Seiten und es funktioniert tadellos.

1. Gehen Sie auf die Video-Seite auf YouTube und klicken Sie auf den Share Button
2. Einbetten wählen
3. Kopieren Sie das HTML-Snippet und fügen Sie es in Ihr Markdown ein.

Das Snippet sieht wie folgt aus:

    <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: Sie können sich die Live-Vorschau hier

Answer 4

Ich habe https://yt-embed.herokuapp.com/ um dies zu vereinfachen. Die Verwendung ist direkt, aus den obigen Beispielen:

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

Wird dazu führen:

Rufen Sie einfach an: https://yt-embed.herokuapp.com/embed?v=[video_id] als Bild anstelle von https://img.youtube.com/vi/ .

Answer 5

Wenn Sie HTML-Tags mehr mögen als Markdown + zentrierte Ausrichtung:

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