it-swarm.com.de

Betten Sie ein YouTube-Video ein

Ich bin ziemlich neu in Markup (obwohl es extrem einfach zu erlernen ist). Ich arbeite an einem Paket und versuche, die Wiki-Seiten so zu gestalten, dass sie als Hilfe-Handbuch erscheinen. Ich kann ganz einfach einen YouTube-Videolink in die Wiki-Seite einfügen, aber wie binde ich ein YouTube-Video ein? Möglicherweise ist dies nicht möglich.

Ich habe gelesen, dass Sie HTML-Tags verwenden können, also habe ich versucht, HTML über diese LINK wie folgt einzubetten:

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

Und die Seite gespeichert, aber nichts ist passiert.

  1. Ist es möglich, ein YouTube-Video auf Github-Wikim-Seiten einzubetten?
  2. Wenn das so ist, wie?
229
Tyler Rinker

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 finden Sie unter hier . Wenn Sie es einfach halten möchten, erstellen Sie einfach einen Link mit der folgenden Syntax:

[linkname](https://youtubevideourl)

370
MGA

Komplettes Beispiel

Einblenden der Antwort von @ MGA

Während es nicht möglich ist, ein Video in Markdown einzubetten, können Sie " "durch Einfügen eines gültigen verknüpften Bildes in Ihre Markdown-Datei, mit diesem Format:

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

Erklärung der Abschrift

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

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

Beispiel mit Valid Markdown und YouTube Thumbnail:

Everything Is AWESOME

Wir beziehen das thumbnail image direkt aus YouTube und Verknüpfung mit dem eigentlichen Video. Wenn die Person auf das Bild/Miniaturbild klickt, wird sie zum Video weitergeleitet.

Code:

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

[~ # ~] oder [~ # ~] Wenn Sie Lesern ein visueller Hinweis dass das Bild/Miniaturbild tatsächlich ein abspielbares ist = Video, mache deinen eigenen Screenshot des Videos in YouTube und verwende diesen stattdessen als Miniaturbild.

Beispiel mit Screenshot mit Video Controls als 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 Vorteile

Während dies ein paar zusätzliche Schritte erfordert ( ein ) Screenshot aufnehmen des Videos und ( b ) Hochladen damit Sie das Bild als Miniaturbild verwenden können 3 clear Vorteile :

  1. Die Person, die Ihren Markdown (oder die resultierende HTML-Seite) liest, hat einen visuellen Hinweis , der ihnen mitteilt, dass sie das Video ansehen können () - Videosteuerung ermutigen Klicken auf )
  2. Sie können ein bestimmtes Bild im Video als Miniaturbild auswählen, um Ihren Inhalt ansprechender zu gestalten )
  3. Sie können eine Verknüpfung zu einer bestimmten Zeit im Video erstellen, ab der die Wiedergabe startet, wenn auf das verknüpfte Bild geklickt wird. (in unserem Fall ab 35 Sekunden)

Einen Screenshot machen dauert

Funktioniert überall!

Da dies ein 100% Standard Abschlag ist, funktioniert es überall ... probiere es auf GitHub, Redit, Ghost und natürlich hier auf StackOverflow!

Vimeo

Dieser Ansatz funktioniert auch mit Vimeo-Videos

Beispiel

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

Anmerkungen:

227
nelsonic

Markdown unterstützt keine offiziell Video-Einbettungen, aber Sie können rohes HTML darin einbetten. Ich habe mit GitHub Pages getestet und es funktioniert einwandfrei.

  1. Gehe auf die Videoseite von YouTube und klicke auf den Teilen-Button
  2. Wählen Sie Einbetten
  3. Kopieren Sie das HTML-Snippet und fügen Sie es in Ihren Markdown ein

Das Snippet sieht folgendermaßen 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 die Live-Vorschau hier

23
Daksh Shah

Wenn Sie HTML-Tags mehr mögen als Markdown + Ausrichtung in der Mitte:

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

Erweitern Sie die Antworten von @MGA und @nelsonic und versuchen Sie nur, es ein bisschen einfacher zu machen, den erforderlichen Abschlag zu erhalten.

Ich habe die oben genannten Vorschläge aufgenommen und in einer kleinen Clay-Funktion zusammengefasst, die eine Youtube-URL und einen Bild-Alt-Text enthält und Ihnen ein MarkDown-Link-Bild zurückgibt, das Sie einfach in Ihre Github-Infodatei einfügen können: https: //www.clay.run/services/nicoslepicos/github-create-video-embed-mock/code

Funktioniert auf einem, der die von @nelsonic vorgeschlagenen Steuerelemente für den Videoplayer hat

1
nicoslepicos