## My Markdown file TEMPLATE for my video tutorials, with Images.

> #### Below is the best way I have found to make a MD file (With Locally Embeded Video's & Images).

> ##### <mark><u>Convert the .MD file to a "Self Contained Portable Mini Web Page"</u></mark>
> The .MD file can then be Exported as a "Self Contained Portable Mini Web Page", which can then be opened & used locally  
> or uploaded to a WebHost & accessed via the main HTML files web address link.  
> `When Video's clicked on in a browser via the Portble HTML:` A new web page will automatically open & play the video in there.

> ##### <mark><u>As a standard Markdown(.MD) file...</u></mark>
> `When video's are clicked on in Markdown:` The video will be played via the default video player on that system (Eg. PotPlayer).
---

## <u>Option-1 (My Favourite)</u>

##### <mark><u>The Video & Image files stored in the same Local Folder as the Portble HTML, and accessed using the File Name ONLY</u></mark>  
> <a href="Getting_Started_with_Markdown.mp4" 
target="_blank">
<img src="Black_Vid_Red-Click.png" 
alt="Sublime Text" width="300" height="180" border="5" /></a>
> <p> ** If the video is clicked from Markdown.. The video is played with the default player (PotPlayer) **</p>
> <p> ** If the video is clicked from Markdown Browser Preview.. The video is played in a New Browser Page **</p>
> <p> ** If the video is clicked from Markdown Exported Self-Con HTML.. The video is played in a New Browser Page **</p>
> <p> <mark><u> `This works BUT.. YOU MUST PUT ALL VIDEO FILES IN THE SAME FOLDER!!` </u></mark> </p>
---

> <a href="Getting_Started_with_Markdown.mp4" 
target="_blank">
<img src="Black_Vid_Red-Click.png" 
alt="Sublime Text" width="300" height="180" border="5" /></a>
> <p> <mark><u> `This works BUT.. YOU MUST PUT ALL VIDEO FILES IN THE SAME FOLDER!!` </u></mark> </p>
---

## <u>Option-2 (Good but NOT great)</u>
<mark>This code is good but..</mark>   
* You CANNOT manually set the Image to what you want.
* The video starts & continues to play in the small video thumbnail, until you make it full screen.
* Not easy for the end-user to understand.

### <mark>Video and Image is in the same Local Folder as the Portable HTML. 
The media links are generated from the media's full name. <mark>`Eg. video_new.mp4`</mark></mark>

> <video controls width="400" height="250" border="5" > 
> <source src="Black_Vid_Red-Click.png" 
> type="image/png">
> <source src="Getting_Started_with_Markdown.mp4" 
> type="video/mp4">
> </video>   
> <em> My Embedded Video, in the Local Folder</em>
> <p> <em> <mark>This code will Automatically give you a Thumbnail of the video.</mark></em> </p> 
> <p> <em> This code makes the video play in the same Thumbnail video box. </em> </p> 
> <p> <em>IT DOES NOT OPEN A NEW WEB PAGE.</em> </p>

---
Created By Jap-Slappa :)