Como incorporar um vídeo do YouTube nas páginas wiki do GitHub?


298

Eu sou bastante novo na marcação (embora seja extremamente fácil de pegar). Estou trabalhando em um pacote e estou tentando fazer com que as páginas wiki fiquem bonitas como um manual de ajuda. Posso inserir um link de vídeo do YouTube na página wiki com bastante facilidade, mas como faço para incorporar um vídeo do YouTube. Eu sei que isso pode não ser possível.

Eu li que você pode usar tags HTML, então tentei incorporar com HTML por este link da seguinte maneira:

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

E salvou a página, mas nada aconteceu.

  1. É possível incorporar um vídeo do YouTube nas páginas wiki do GitHub?
  2. Se sim, como?

4
É possível que as páginas wiki do github não permitam tags <object> por motivos de segurança.
Cypress Frankenfeld

Respostas:


470

Não é possível incorporar vídeos diretamente, mas você pode colocar uma imagem vinculada a um vídeo do 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 mais informações, consulte esta folha de dicas do Markdown no GitHub.


2
O iframe não funciona para páginas da wiki, apenas esta solução atualmente funciona.
precisa

270

Exemplo completo

Expandindo a resposta de @MGA

Embora não seja possível incorporar um vídeo no Markdown, você pode "falsificá-lo" incluindo uma imagem vinculada válida no seu arquivo de marcação, usando 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")

Explicação da remarcação

Se esse snippet de marcação parecer complicado, divida-o em duas partes:

uma imagem
![image alt text](https://example.com/link-to-image)
enrolada em um link
[link text](https://example.com/my-link "link title")

Exemplo usando Markdown válido e miniatura do YouTube:

Tudo é fantástico

Estamos adquirindo a imagem em miniatura diretamente do YouTube e vinculando ao vídeo real. Assim, quando a pessoa clicar na imagem / miniatura, ela será direcionada ao vídeo.

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

OU Se você quiser fornecer aos leitores uma dica visual de que a imagem / miniatura é realmente umvídeo reproduzível , tire sua própria captura de tela do vídeo no YouTube e use-a como miniatura.

Exemplo usando captura de tela com controles de vídeo como sugestão visual:

Tudo é fantástico

Código:

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

 Vantagens claras

Embora isso exija algumas etapas extras ( a ) capturando a captura de tela do vídeo e ( b ) enviando-a para que você possa usar a imagem como miniatura, ela possui três vantagens claras :

  1. A pessoa que está lendo a sua marcação (ou a página html resultante) tem uma dica visual dizendo que pode assistir ao vídeo ( os controles de vídeo incentivam o clique )
  2. Você pode escolher um quadro específico no vídeo para usar como miniatura (tornando seu conteúdo mais atraente )
  3. Você pode vincular a um horário específico do vídeo a partir do qual a reprodução será iniciada quando a imagem vinculada for clicada. (no nosso caso a partir de 35 segundos)

A captura e o upload de uma captura de tela levam alguns segundos, mas têm um grande retorno.

Funciona em qualquer lugar!

Como se trata de remarcação padrão, funciona em qualquer lugar. tente no GitHub, Reddit, Ghost e aqui no Stack Overflow.

Vimeo

Essa abordagem também funciona com vídeos do Vimeo

Exemplo

Chapeuzinho Vermelho

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
Recentemente, descobri que tinha que omitir o esquema de URL http / https da URL para fazer com que isso funcionasse, ou seja,[![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, que analisador / plataforma de remarcação você estava usando? nós usamos o código com o httpou httpsno GitHub por exemplo: github.com/dwyl/remote-working onde a imagem de vídeo e trabalho link ...
nelsonic

26

O Markdown não suporta oficialmente incorporações de vídeo, mas você pode incorporar HTML bruto. Eu testei com o GitHub Pages e ele funciona perfeitamente.

  1. Vá para a página Vídeo no YouTube e clique no botão Compartilhar
  2. Escolha Incorporar
  3. Copie e cole o snippet HTML na sua remarcação

O trecho se parece com:

    <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: Você pode conferir a prévia ao vivo aqui


Essa estratégia iframe parecia promissora. No entanto, ele não funciona no arquivo READ.md do meu repositório.
Adam Hurwitz

8

Se você gosta de tags HTML mais do que markdown + alinhamento 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

Alinhe ao centro o vídeo com a miniatura e o link:

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

insira a descrição da imagem aqui


Essa é uma ótima resposta, pois é fácil de automatizar! Para esse fim, o modelo para esse link de imagem é https://img.youtube.com/vi/ID_OF_VIDEO/0.jpge a API para formar links de imagem é explicada em detalhes nesta resposta: stackoverflow.com/a/2068371/55478
Noah Sussman


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.