Come posso incorporare un video di YouTube nelle pagine wiki di GitHub?


298

Sono abbastanza nuovo per il markup (anche se è estremamente facile da raccogliere). Sto lavorando a un pacchetto e sto cercando di far apparire le pagine wiki come un manuale di aiuto. Posso inserire un collegamento video YouTube nella pagina wiki abbastanza facilmente, ma come posso incorporare un video YouTube. So che potrebbe non essere possibile.

Ho letto che puoi usare i tag HTML, quindi ho provato a incorporare con HTML per questo link come segue:

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

E ha salvato la pagina ma non è successo niente.

  1. È possibile incorporare un video di YouTube nelle pagine wiki di GitHub?
  2. Se é cosi, come?

4
È possibile che le pagine wiki di github non consentano tag <object> per motivi di sicurezza.
Cypress Frankenfeld il

Risposte:


470

Non è possibile incorporare direttamente i video, ma è possibile inserire un'immagine che si collega a un video di 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)

Per maggiori informazioni guarda questo cheatsheet di Markdown su GitHub.


2
L'iframe non funziona per le pagine wiki, attualmente funziona solo questa soluzione.
Tyler Rinker,

270

Esempio completo

Espandendo la risposta di @MGA

Sebbene non sia possibile incorporare un video in Markdown, puoi "fingere" includendo un'immagine collegata valida nel tuo file di markup, usando questo formato:

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

Spiegazione del Markdown

Se questo frammento di markup sembra complicato, suddividilo in due parti:

un'immagine
![image alt text](https://example.com/link-to-image)
avvolta in un collegamento
[link text](https://example.com/my-link "link title")

Esempio con Markdown valido e Miniatura di YouTube:

Tutto è FANTASTICO

Stiamo acquistando l'immagine in miniatura direttamente da YouTube e ci colleghiamo al video reale, quindi quando la persona fa clic sull'immagine / miniatura verrà presa per il video.

Codice:

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

OPPURE Se vuoi dare ai lettori un segnale visivo che l'immagine / miniatura è in realtà unvideo riproducibile , prendi il tuo screenshot del video su YouTube e usalo come miniatura.

Esempio di utilizzo di Screenshot con controlli video come Visual Cue:

Tutto è FANTASTICO

Codice:

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

 Vantaggi chiari

Sebbene ciò richieda un paio di passaggi extra ( a ) acquisire lo screenshot del video e ( b ) caricarlo in modo da poter utilizzare l'immagine come miniatura, presenta 3 chiari vantaggi :

  1. La persona che legge il tuo markdown (o la pagina html risultante) ha un segnale visivo che dice che possono guardare il video ( i controlli video incoraggiano a fare clic )
  2. Puoi scegliere un fotogramma specifico nel video da utilizzare come anteprima (rendendo così i tuoi contenuti più coinvolgenti )
  3. Puoi collegare un orario specifico nel video da cui inizierà la riproduzione quando si fa clic sull'immagine collegata. (nel nostro caso da 35 secondi)

Catturare e caricare uno screenshot richiede alcuni secondi ma ha un grande profitto.

Funziona ovunque!

Poiché si tratta di un markdown standard, funziona ovunque. provalo su GitHub, Reddit, Ghost e qui su Stack Overflow.

Vimeo

Questo approccio funziona anche con i video Vimeo

Esempio

Cappuccetto Rosso

Codice

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

Appunti:


2
Recentemente ho scoperto che dovevo omettere lo schema URL http / https dall'URL per farlo funzionare, ovvero[![Everything Is AWESOME](//img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](//www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
Stephen Quan,

1
@StephenQuan quale parser / piattaforma di markdown stavi usando? usiamo il codice con la httpo httpssu GitHub esempio: github.com/dwyl/remote-working in cui l'immagine video e di lavoro link ...
nelsonic

26

Markdown non supporta ufficialmente gli incorporamenti di video, ma puoi incorporare HTML grezzo in esso. Ho provato con GitHub Pages e funziona perfettamente.

  1. Vai alla pagina Video su YouTube e fai clic sul pulsante Condividi
  2. Scegli Incorpora
  3. Copia e incolla lo snippet HTML nel tuo markdown

Lo snippet è simile a:

    <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: puoi vedere l' anteprima dal vivo qui


Questa strategia iframe sembrava promettente. Tuttavia, non funziona nel file READ.md del mio repository .
Adam Hurwitz l'

8

Se ti piacciono i tag HTML più di markdown + allineamento centrale:

<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

Allinea al centro il video con miniature e link:

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

Risultato:

inserisci qui la descrizione dell'immagine


Questa è un'ottima risposta perché è facile da automatizzare! A tal fine, il modello per quel collegamento immagine è https://img.youtube.com/vi/ID_OF_VIDEO/0.jpge l'API per la creazione di collegamenti immagine è spiegata in dettaglio in questa risposta: stackoverflow.com/a/2068371/55478
Noah Sussman


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.