¿Cómo puedo insertar un video de YouTube en las páginas wiki de GitHub?


298

Soy bastante nuevo en el marcado (aunque es extremadamente fácil de recoger). Estoy trabajando en un paquete e intento que las páginas wiki se vean bien como un manual de ayuda. Puedo insertar un enlace de video de YouTube en la página wiki con bastante facilidad, pero ¿cómo puedo insertar un video de YouTube? Sé que esto puede no ser posible.

He leído que puede usar etiquetas HTML, así que intenté incrustar con HTML según este enlace de la siguiente manera:

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

Y guardé la página pero no pasó nada.

  1. ¿Es posible insertar un video de YouTube en las páginas wiki de GitHub?
  2. ¿Si es así, cómo?

44
Es posible que las páginas wiki de github no permitan etiquetas <objeto> por razones de seguridad.
Cypress Frankenfeld

Respuestas:


470

No es posible insertar videos directamente, pero puedes poner una imagen que se vincule a un video de 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)

Para obtener más información, mire esta hoja de referencia de Markdown en GitHub.


2
El iframe no funciona para páginas wiki, solo esta solución funciona actualmente.
Tyler Rinker

270

Ejemplo completo

Ampliando la respuesta de @MGA

Si bien no es posible incrustar un video en Markdown, puede "falsificarlo" al incluir una imagen vinculada válida en su archivo de marcado, utilizando este 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")

Explicación del Markdown

Si este fragmento de marcado parece complicado, divídalo en dos partes:

una imagen
![image alt text](https://example.com/link-to-image)
envuelta en un enlace
[link text](https://example.com/my-link "link title")

Ejemplo usando Markdown válido y miniatura de YouTube:

Todo es asombroso

Estamos obteniendo la imagen en miniatura directamente de YouTube y enlazando con el video real, por lo que cuando la persona hace clic en la imagen / miniatura se la llevará al video.

Código:

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

O bien, si desea dar a los lectores una señal visual de que la imagen / miniatura es en realidad unvideo reproducible , tome su propia captura de pantalla del video en YouTube y utilícela como la miniatura.

Ejemplo usando Captura de pantalla con controles de video como Visual Cue:

Todo es asombroso

Código:

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

 Ventajas claras

Si bien esto requiere un par de pasos adicionales ( a ) tomar la captura de pantalla del video y ( b ) subirlo para que pueda usar la imagen como miniatura, tiene 3 ventajas claras :

  1. La persona que lee su descuento (o la página html resultante) tiene una señal visual que le dice que puede ver el video ( los controles de video alientan a hacer clic )
  2. Puede elegir un marco específico en el video para usarlo como miniatura (lo que hace que su contenido sea más atractivo )
  3. Puede vincular a un momento específico en el video desde el cual comenzará la reproducción cuando se haga clic en la imagen vinculada. (en nuestro caso de 35 segundos)

Tomar y cargar una captura de pantalla lleva unos segundos, pero tiene una gran recompensa.

Funciona en todas partes!

Como se trata de una rebaja estándar, funciona en todas partes. pruébalo en GitHub, Reddit, Ghost y aquí en Stack Overflow.

Vimeo

Este enfoque también funciona con videos de Vimeo

Ejemplo

Caperucita Roja

Código

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

Notas:


2
Recientemente descubrí que tenía que omitir el esquema de URL http / https de la URL para que esto funcionara, es decir[![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, ¿qué analizador / plataforma de rebajas estaba utilizando? usamos el código con el httpo httpsen GitHub por ejemplo: github.com/dwyl/remote-working donde el vídeo de trabajo enlace de imagen y ...
nelsonic

26

Markdown no admite oficialmente incrustaciones de video, pero puede incrustar HTML sin formato en él. Probé con GitHub Pages y funciona perfectamente.

  1. Vaya a la página de video en YouTube y haga clic en el botón Compartir
  2. Elige Insertar
  3. Copie y pegue el fragmento de HTML en su descuento

El fragmento se ve así:

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

PD: Puedes ver la vista previa en vivo aquí


Esta estrategia de iframe parecía prometedora. Sin embargo, no funciona en el archivo READ.md de mi repositorio .
Adam Hurwitz

8

Si le gustan más las etiquetas HTML que Markdown + alineación 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

Centrar alinear video con miniatura y enlace:

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

Resultado:

ingrese la descripción de la imagen aquí


¡Esta es una gran respuesta porque es fácil de automatizar! Con ese fin, la plantilla para ese enlace de imagen es https://img.youtube.com/vi/ID_OF_VIDEO/0.jpgy la API para formar enlaces de imagen se explica en detalle en esta respuesta: stackoverflow.com/a/2068371/55478
Noah Sussman


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.