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.

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

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

    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](http://www.djcxy.com/uploads/images/11/cc/11cc2893bed490ab5f07c49c1ae888b5.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 :

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

    • 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

    链接地址: http://www.djcxy.com/p/28902.html

    上一篇: 如何获得HQ YouTube的缩略图？

    下一篇: 嵌入YouTube视频