How can I embed a YouTube video on GitHub wiki pages

Question

I am fairly new to markup  though it s extremely easy to pickup   I am working on a package and am trying to get the wiki pages looking nice as a help manual  I can insert a YouTube video link into the wiki page pretty easily but how do I embed a YouTube video  I know this may not be possible   I have read you can use HTML tags so I tried embedding with HTML per this link as follows    lt object width  425  height  350  gt     lt param name  movie  value  http   www youtube com user wwwLoveWatercom v BTRN1YETpyg    gt     lt param name  wmode  value  transparent    gt     lt embed src  http   www youtube com user wwwLoveWatercom v BTRN1YETpyg           type  application x-shockwave-flash           wmode  transparent  width  425  height  350    gt   lt  object gt    And saved the page but nothing happened    Is it possible to embed a YouTube video on GitHub wiki pages  If so how

User · Accepted Answer

It s not possible to embed videos directly  but you can put an image which links to a YouTube video     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    For more information about Markdown look at this Markdown cheatsheet on GitHub  For more information about Youtube image links look this question

User · Answer

Complete Example  Expanding on  MGA s Answer  While it s not possible to embed a video in Markdown you can  quot fake it quot  by including a valid linked image in your markup file  using this 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  quot Video Title quot   Explanation of the Markdown If this markup snippet looks complicated  break it down into two parts  an image   image alt text  https   example com link-to-image  wrapped in a link  link text  https   example com my-link  quot link title quot   Example using Valid Markdown and YouTube Thumbnail   We are sourcing the thumbnail image directly from YouTube and linking to the actual video  so when the person clicks the image thumbnail they will be taken to the video  Code     Everything Is AWESOME  https   img youtube com vi StTqXEQ2l-Y 0 jpg   https   www youtube com watch v StTqXEQ2l-Y  quot Everything Is AWESOME quot   OR If you want to give readers a visual cue that the image thumbnail is actually a playable video  take your own screenshot of the video in YouTube and use that as the thumbnail instead  Example using Screenshot with Video Controls as Visual Cue   Code     Everything Is AWESOME  http   i imgur com Ot5DWAW png   https   youtu be StTqXEQ2l-Y t 35s  quot Everything Is AWESOME quot     Clear Advantages While this requires a couple of extra steps  a  taking the screenshot of the video and  b  uploading it so you can use the image as your thumbnail it does have 3 clear advantages   The person reading your markdown  or resulting html page  has a visual cue telling them they can watch the video  video controls encourage clicking  You can chose a specific frame in the video to use as the thumbnail  thus making your content more engaging  You can link to a specific time in the video from which play will start when the linked-image is clicked   in our case from 35 seconds   Taking and uploading a screenshot takes a few seconds but has a big payoff  Works Everywhere  Since this is standard markdown  it works everywhere  try it on GitHub  Reddit  Ghost  and  here on Stack Overflow  Vimeo This approach also works with Vimeo videos Example  Code    Little red riding hood  http   i imgur com 7YTMFQp png   https   vimeo com 3514904  quot Little red riding hood - Click to Watch  quot    Notes   How to take screenshot  http   www take-a-screenshot org   all platforms  Upload Thumbnail Image  Once you ve taken your screenshot you can drag-and-drop it into imgur com to upload and immediately use it as your thumbnail YouTube thumbnail info  How do I get a YouTube video thumbnail from the YouTube API

User · Answer

Markdown does not officially support video embeddings but you can embed raw HTML in it  I tested out with GitHub Pages and it works flawlessly    Go to the Video page on YouTube and click on the Share Button Choose Embed Copy and Paste the HTML snippet in your markdown    The snippet looks like         lt iframe width  560  height  315  src  https   www youtube com embed MUQfKFzIOeU   frameborder  0   allow  accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture   allowfullscreen gt  lt  iframe gt    PS  You can check out the live preview here

User · Answer

If you like HTML tags more than markdown   center alignment    x000D   x000D   lt div align  center  gt  x000D     lt a href  https   www youtube com watch v YOUTUBE VIDEO ID HERE  gt  lt img src  https   img youtube com vi YOUTUBE VIDEO ID HERE 0 jpg  alt  IMAGE ALT TEXT  gt  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Center align Video with Thumbnail and Link    lt div align  center  gt         lt a href  https   www youtube com watch v StTqXEQ2l-Y  gt        lt img        src  https   img youtube com vi StTqXEQ2l-Y 0 jpg         alt  Everything Is AWESOME         style  width 100    gt         lt  a gt       lt  div gt    Result

User · Answer

Adding a link with the thumbnail  originally used by YouTube is a solution  that works  The thumbnail  used by YouTube is accessible the following way   if the official video link is  https   www youtube com watch v 5yLzZikS15k then the thumbnail is  https   img youtube com vi 5yLzZikS15k 0 jpg  Following this logic  the code below produces flawless results   x000D   x000D   lt div align  left  gt         lt a href  https   www youtube com watch v 5yLzZikS15k  gt            lt img src  https   img youtube com vi 5yLzZikS15k 0 jpg  style  width 100    gt         lt  a gt   lt  div gt  x000D   x000D   x000D

User · Answer

I created https   yt-embed herokuapp com  to simplify this  The usage is direct  from the examples above      Everything Is AWESOME  https   yt-embed herokuapp com embed v StTqXEQ2l-Y   https   www youtube com watch v StTqXEQ2l-Y  Everything Is AWESOME     Will result in    Just make a call to  https   yt-embed herokuapp com embed v  video id  as the image instead of https   img youtube com vi

[video] How can I embed a YouTube video on GitHub wiki pages?

Examples related to video

Examples related to github

Examples related to youtube

Examples related to embed

Examples related to markdown