Comment puis-je intégrer une vidéo YouTube sur les pages wiki de GitHub?


298

Je suis assez nouveau pour le balisage (bien qu'il soit extrêmement facile à ramasser). Je travaille sur un package et j'essaie de rendre les pages wiki plus belles sous forme de manuel d'aide. Je peux insérer un lien vidéo YouTube dans la page wiki assez facilement, mais comment intégrer une vidéo YouTube. Je sais que ce n'est peut-être pas possible.

J'ai lu que vous pouvez utiliser des balises HTML, j'ai donc essayé d'incorporer du HTML par ce lien comme suit:

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

Et enregistré la page mais rien ne s'est produit.

  1. Est-il possible d'intégrer une vidéo YouTube sur les pages wiki de GitHub?
  2. Si c'est le cas, comment?

4
Il est possible que les pages wiki de github n'autorisent pas les balises <object> pour des raisons de sécurité.
Cypress Frankenfeld

Réponses:


470

Il n'est pas possible d'incorporer des vidéos directement, mais vous pouvez mettre une image qui relie à une vidéo 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)

Pour plus d'informations, consultez cette feuille de triche Markdown sur GitHub.


2
L'iframe ne fonctionne pas pour les pages wiki, seule cette solution fonctionne actuellement.
Tyler Rinker

270

Exemple complet

Développer la réponse de @MGA

Bien qu'il ne soit pas possible d' incorporer une vidéo dans Markdown, vous pouvez la "simuler" en incluant une image liée valide dans votre fichier de balisage, en utilisant ce 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")

Explication de la démarque

Si cet extrait de balisage semble compliqué, décomposez-le en deux parties:

une image
![image alt text](https://example.com/link-to-image)
enveloppée dans un lien
[link text](https://example.com/my-link "link title")

Exemple utilisant Valid Markdown et YouTube Thumbnail:

Tout est génial

Nous achetons l'image miniature directement à partir de YouTube et le lions à la vidéo réelle, donc lorsque la personne clique sur l'image / miniature, elle sera dirigée vers la vidéo.

Code:

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

OU Si vous souhaitez donner aux lecteurs une indication visuelle que l'image / miniature est en fait une vidéo lisible , prenez votre propre capture d'écran de la vidéo sur YouTube et utilisez-la comme miniature à la place.

Exemple utilisant une capture d'écran avec des contrôles vidéo comme repère visuel:

Tout est génial

Code:

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

 Avantages clairs

Bien que cela nécessite quelques étapes supplémentaires ( a ) prendre la capture d' écran de la vidéo et ( b ) la télécharger afin que vous puissiez utiliser l'image comme miniature, elle en a 3 claires avantages :

  1. La personne qui lit votre démarque (ou la page HTML résultante) a un repère visuel lui disant qu'elle peut regarder la vidéo ( les commandes vidéo encouragent à cliquer )
  2. Vous pouvez choisir une image spécifique dans la vidéo à utiliser comme miniature (rendant ainsi votre contenu plus attrayant )
  3. Vous pouvez créer un lien vers une heure spécifique créer de la vidéo à partir de laquelle la lecture commencera lorsque vous cliquerez sur l'image liée. (dans notre cas à partir de 35 secondes)

Prendre et télécharger une capture d'écran prend quelques secondes mais a un gros gain.

Fonctionne partout!

Comme il s'agit d'une démarque standard, cela fonctionne partout. essayez-le sur GitHub, Reddit, Ghost et ici sur Stack Overflow.

Vimeo

Cette approche fonctionne également avec les vidéos Vimeo

Exemple

Le petit Chaperon rouge

Code

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

Remarques:


2
J'ai récemment constaté que je devais omettre le schéma d'URL http / https de l'URL pour que cela fonctionne, c'est[![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 quel analyseur / plateforme de démarque utilisiez-vous? nous utilisons le code avec le httpou httpssur GitHub par exemple: github.com/dwyl/remote-working où l'image vidéo et le travail de lien ...
nelsonic

26

Markdown ne prend pas officiellement en charge les incorporations vidéo, mais vous pouvez y incorporer du HTML brut. J'ai testé avec GitHub Pages et cela fonctionne parfaitement.

  1. Accédez à la page Vidéo sur YouTube et cliquez sur le bouton Partager
  2. Choisissez Intégrer
  3. Copiez et collez l'extrait HTML dans votre démarque

L'extrait ressemble à:

    <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: Vous pouvez consulter l' aperçu en direct ici


Cette stratégie iframe semblait prometteuse. Cependant, cela ne fonctionne pas dans le fichier READ.md de mon dépôt.
Adam Hurwitz

8

Si vous aimez les balises HTML plus que démarque + alignement central:

<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

Centrez la vidéo avec la miniature et le lien:

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

Résultat:

entrez la description de l'image ici


C'est une excellente réponse car elle est facile à automatiser! À cette fin, le modèle de ce lien d'image est https://img.youtube.com/vi/ID_OF_VIDEO/0.jpget l'API pour former des liens d'image est expliquée en détail dans cette réponse: stackoverflow.com/a/2068371/55478
Noah Sussman


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.