Intégrer une vidéo YouTube

je suis assez nouveau à l'balisage (même si c'est extrêmement facile de pick-up). Je travaille sur un paquet et j'essaye de faire en sorte que les pages wiki soient belles comme un 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. Cela peut ne pas être possible.

j'ai lu que vous pouvez utiliser des balises HTML donc j'ai essayé d'intégrer avec 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 sauvé la page mais rien ne s'est passé.

  1. est-il possible d'intégrer une vidéo youtube sur les pages wikim de github?
  2. Si oui, comment?
173
demandé sur 0xcaff 2012-08-04 04:12:03

5 réponses

Il n'est pas possible d'intégrer des vidéos directement, mais vous pouvez mettre une image qui renvoie à 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'information, regardez ici . Si vous voulez le garder simple, il suffit de faire un lien En utilisant la syntaxe suivante:

[linkname](https://youtubevideourl)

279
répondu MGA 2016-03-17 04:41:49

Exemple Complet

en savoir plus sur @MGA 's Answer

bien qu'il ne soit pas possible de intégrer une vidéo dans Markdown vous pouvez " faux it " en incluant un valid linked-image dans votre fichier Markdown, 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 du Markdown

si cet extrait de markdown semble compliqué, décomposez-le en deux parties:

une image

![image alt text](http//example.io/link-to-image)

enveloppé dans un lien

[link text](http//example.io/my-link "link title")

exemple utilisant Markdown valide et la vignette YouTube:

Everything Is AWESOME

nous cherchons le miniature image directement à partir de YouTube et en lien avec la vidéo réelle, donc quand la personne clique sur l'image/miniature, ils seront pris à la vidéo.

Code:

[![Everything Is AWESOME](/images/content/11804820/11cc2893bed490ab5f07c49c1ae888b5.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

OU Si vous voulez donner à ses lecteurs un visual cue que l'image/la vignette est en fait une vidéo jouable , prenez votre propre capture d'écran de la vidéo sur YouTube et utilisez-la comme la vignette à la place.

exemple utilisant une capture d'écran avec des commandes vidéo comme signal visuel:

Everything Is AWESOME

Code:

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

Clair Avantages

bien que cela nécessite un couple d'étapes supplémentaires ( a ) prendre la capture d'écran de la vidéo et ( b ) uploading it afin que vous puissiez utiliser l'image comme votre vignette, il a 3 clair avantages :

  1. la personne qui lit votre markdown (ou la page html qui en résulte) a un visual cue leur disant qu'ils peuvent regarder la vidéo ( video controls encourage clicking )
  2. vous pouvez choisir un cadre spécifique dans la vidéo à utiliser comme vignette (rendant ainsi votre contenu plus engageante )
  3. vous pouvez lien à une heure spécifique dans la vidéo à partir de laquelle la lecture commencera lorsque l'image liée est cliquée. (dans notre cas à partir de 35 secondes)

Prendre une capture d'écran prend

Fonctionne Partout!

Puisque c'est 100% markdown, il œuvres partout ... essayez sur GitHub, Redit, Ghost et bien sûr ici sur StackOverflow!

Vimeo

Cette approche fonctionne aussi avec les vidéos Vimeo

exemple

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

Notes:

196
répondu nelsonic 2017-05-23 12:18:14

si vous aimez les balises HTML plus que markdown + alignement du centre:

<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>
4
répondu Ivan Berezanskiy 2017-10-30 16:57:31

en S'appuyant sur les réponses de @MGA et @nelsonic et en essayant d'en faire une un peu plus facile pour obtenir le markdown nécessaire.

j'ai pris les suggestions mentionnées ci-dessus, et l'ai mis ensemble dans une petite fonction D'argile qui prend dans une URL Youtube et un peu D'Image Alt texte et vous renvoie une Image de lien de MarkDown que vous pouvez simplement coller dans votre Github ReadMe: https://www.argile.exécuter/services/nicoslepicos/github-créer-vidéo-embed-maquette/code

fonctionnera sur un qui a les commandes du lecteur vidéo comme suggéré par @nelsonic

1
répondu nicoslepicos 2017-09-24 14:59:17

j'ai utilisé iframe pour intégrer la vidéo YouTube comme suit:

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>
-2
répondu K. Siva Prasad Reddy 2017-11-05 15:47:04