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?

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.

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:

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:

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

Code

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

Remarques:

• Comment faire une capture d'écran: http://www.take-a-screenshot.org/ (toutes les plateformes)
• Télécharger une image miniature: Une fois que vous avez pris votre capture d'écran, vous pouvez la glisser-déposer sur imgur.com pour la télécharger et l'utiliser immédiatement comme miniature
• Informations sur les miniatures YouTube: comment puis-je obtenir une miniature de vidéo YouTube à partir de l'API YouTube?

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

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>

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:

J'ai créé https://yt-embed.herokuapp.com/ pour simplifier cela. L'utilisation est directe, à partir des exemples ci-dessus:

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

Aura pour résultat:

Appelez simplement: https://yt-embed.herokuapp.com/embed?v==video_id] comme image au lieu de https://img.youtube.com/vi/ .

• Nous pouvons utiliser du code html dans Markdown.
• Consultez le document officiel sur Intégrer une vidéo ou une liste de lecture sur support.google.com/youtube

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Consultez d' autres conseils et astuces sur YouTube