Echo Snippet

Code Memo.



CSS 7 ajax 1 backup 1 bash 18 cron 2 darktheme 1 error 1 fichier 1 git 1 htaccess 3 html 17 ip 2 iptables 1 js 2 load 2 markdown 1 nano 2 netatmo 1 php 43 php4 1 php5 2 php7 1 powershell 1 rss 3 stylus 3 youtube 1

.

Markdown - video youtube & vimeo

Markdown - video youtube & vimeo

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


    
The Solution using Standard Markdown ( not iFrame! )

Using an iframe is not the "obvious" solution... especially if the Markdown parser (or publishing platform) you are using does not support inlining content from a different website ... Instead 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:

Everything Is AWESOME

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:

Everything Is AWESOME
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
Not Only C#

And since this is 100% Standard markdown, it works everywhere (not just for the C# parser!) ... try it on GitHub, Redit or Ghost!
Vimeo

This approach also works with Vimeo videos
Example

Little red ridning hood
Code

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

markdown

<iframe width="100%" height="1172" src="https://snippet.echosystem.fr?embed=5a91473c68158" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 24/02/2018

Flux RSS de cette page


Echo Snippet 1.84 par Bronco - Page générée en 0.01 s