Embed a YouTube video

问题:

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. This may not be possible.

I have read you can use HTML tags so I tried embedding with HTML per this LINK as follows:

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

And saved the page but nothing happened.

1. Is it possible to embed a youtube video on github wikim pages?
2. If so how?

回答1:

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 look here. If you want to keep it simple, just make it a link using the following syntax:

[linkname](https://youtubevideourl)

回答2:

Complete Example

Expanding on @MGA's Answer

While its not possible to embed a video in Markdown you can "fake it" by including a valid linked-image in your Markdown 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 "Video Title")

Explanation of the Markdown

If this markdown snippet looks complicated, break it down into two parts:

an image
![image alt text](http//example.io/link-to-image)
wrapped in a link
[link text](http//example.io/my-link "link title")

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 "Everything Is AWESOME")

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 "Everything Is AWESOME")

 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:

1. The person reading your markdown (or resulting html page) has a visual cue telling them they can watch the video (video controls encourage clicking)
2. You can chose a specific frame in the video to use as the thumbnail (thus making your content more engaging)
3. 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 a screenshot takes

Works Everywhere!

Since this is 100% Standard markdown, it works everywhere ... try it on GitHub, Redit, Ghost and of course here on StackOverflow!

Vimeo

This approach also works with Vimeo videos

Example

Code

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

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; couldn't be easier!
• YouTube thumbnail info: How do I get a YouTube video thumbnail from the YouTube API?

回答3:

If you like HTML tags more than markdown + center alignment:

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

Expanding on @MGA and @nelsonic's answers and just trying to make it a bit easier to get the needed markdown.

I took the suggestions mentioned above, and put it together into a little Clay function that takes in a Youtube URL and some Image Alt Text and returns you a MarkDown Link Image that you can just paste into your Github ReadMe: https://www.clay.run/services/nicoslepicos/github-create-video-embed-mock/code

Will work on one that has the video player controls as suggested by @nelsonic

回答5:

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.

1. Go to the Video page on YouTube and click on the Share Button
2. Choose Embed
3. Copy and Paste the HTML snippet in your markdown

The snippet looks like:

    <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: You can check out the live preview here

回答6:

I used iframe to embed YouTube video as follows:

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>