web-dev-qa-db-fra.com

Intégrer une vidéo YouTube

Je suis assez nouveau pour le balisage (même s'il est extrêmement facile à cueillir). Je travaille sur un package et j'essaye de donner aux pages du wiki une apparence agréable comme manuel d'aide. Je peux insérer un lien de vidéo youtube dans la page wiki assez facilement, mais comment puis-je intégrer une vidéo youtube. Cela peut ne pas être possible.

J'ai lu que vous pouvez utiliser des balises HTML, j'ai donc essayé d'intégrer HTML avec ceci LINK 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 de github wikim?
  2. Si c'est le cas, comment?
videogithubyoutubeembedmarkdown
229
Tyler Rinker

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'informations, regardez here . Si vous voulez garder les choses simples, faites-en simplement un lien en utilisant la syntaxe suivante:

[linkname](https://youtubevideourl)

370
MGA

Exemple complet

Développer la réponse de @ MGA

Même s’il n’est pas possible d’incorporer une vidéo dans Markdown, vous pouvez " la simuler "en incluant une image liée valide 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 de la démarque

Si cet extrait de balisage 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 d'utilisation de Markdown valide et de la miniature YouTube:

Everything Is AWESOME

Nous recherchons directement la vignette à partir de YouTube et un lien vers la vidéo proprement dite. Ainsi, lorsque la personne clique sur l'image/la vignette, elle est transférée dans 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 voulez donner aux lecteurs un repère visuel que l'image/la vignette est en fait une vidéo lisible , prenez votre propre capture d'écran de la vidéo sur YouTube et utilisez-la plutôt comme vignette.

Exemple d'utilisation d'une capture d'écran avec des contrôles vidéo en tant que 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")

Effacer Avantages

Bien que cela nécessite quelques étapes supplémentaires ( a ) pour prendre la capture d'écran de la vidéo et ( b ) en le téléchargeant pour que vous puissiez utiliser l'image en tant que vignette qu'elle contient 3 effacer avantages :

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

Prendre une capture d'écran prend

Fonctionne partout!

Comme il s’agit d’un démarquage 100% standard , il fonctionne partout . ... essayez-le sur GitHub, Redit, Ghost et bien sûr ici sur StackOverflow!

Vimeo

Cette approche fonctionne également 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!")

Remarques:

227
nelsonic

Markdown ne supporte pas officiellement les intégrations vidéo, mais vous pouvez y insérer du code 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 de code 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 le aperçu en direct ici

23
Daksh Shah

Si vous aimez les balises HTML plus que markdown + alignement au 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>
6
Ivan Berezanskiy

Développer les réponses de @MGA et de @ nelsonic et essayer simplement de rendre un peu plus facile l'obtention de la démarque nécessaire.

J'ai pris les suggestions mentionnées ci-dessus et les ai réunies dans une petite fonction Clay qui prend une URL Youtube et un texte Alt Image et vous renvoie une image de lien MarkDown que vous pouvez simplement coller dans votre Github ReadMe: https: //www.clay.run/services/nicoslepicos/github-create-video-embed-mock/code

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

1
nicoslepicos