VIDEO Tutorial 
Adding Video to your Webpages
Part 3: How to Code your web page to show your Video Movie to your Windows OS PC
Go Back to Parts 1 and 2 of this Tutorial
This lesson will assume that you read Parts (1) and (2)
and here I will show you how to code a webpage to show your Video, if you decided to convert your movie to .mp4 format, it will upload FASTER at YouTube
I suggest the following method of showing a Video on your pages
Go to You Tube (www.youtube.com) and open a free account (if necessary) and UPLOAD your Video to their site... just follow all the directions they provide!
Next get the Embed Code for your video... copy it to a page that has this source code... ie copy this source code and make a page from it (change the necessary parts where necessary! Name the page whatever you like:
<html>
<head><title>Your Page Title Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
@media (max-width: 766px) {.laptop {display:none;}}
@media (min-width: 768px) {.video-container {display:none;}}
</style>
</head>
<body style="margin:auto;">
<p><br></p>
<div class="laptop">
...paste your you tube embed code here... it will be an iframe code and your Video will have been converted to mp4 format...
</div>
<div class="video-container">
...paste the same you tube embed code here... it will be an iframe code and your Video will have been converted to mp4 format...
</div>
</body>
</html>
Now you can link this page from your web page and your Video will show there...
Study the code and you'll see how it enables your video to size correctly for large screen as well as small screen devices!
ANOTHER WAY to code your Video into your webpage is to use the <video> tag... you can read all about it HERE At W3Schools.Com ... however this assumes that you can Host Your Video at YOUR Host Server or at another server...
If you use the <video> tag then create a web page like above but use this code:
<html>
<head><title>Your Page Title Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.video-container video { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
@media (max-width: 766px) {.laptop {display:none;}}
@media (min-width: 768px) {.video-container {display:none;}}
</style>
</head>
<body style="margin:auto;">
<p><br></p>
<div class="laptop">
<video controls width="560" height="315" poster="http://URL of appropriately sized poster image here">
<source src="http://URL of your video.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
<div class="video-container">
<video controls width="560" height="315" poster="http://URL of appropriately sized poster image here">
<source src="http://URL of your video.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>
If you use the <video> tag and you want the Video to play onmouseover, then create a web page like above but use this code:
<html>
<head><title>Your Page Title Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.video-container video { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
@media (max-width: 766px) {.laptop {display:none;}}
@media (min-width: 769px) {.text {display:none;}}
@media (min-width: 768px) {.video-container {display:none;}}
</style>
</head>
<body style="margin:auto;">
<p><br></p>
<div class="laptop">
<video width="560" height="315" poster="http://URL of appropriately sized poster image here" onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
<source src="http://URL of your video.mp4" type="video/mp4" /></source>
Your browser does not support HTML5 video.
</video> <p style="text-align:center;width:100%;">
<span style="font-weight:bold;font-size:75%;color:#cc0000;">First click ouside the video<br>then mouseover it to play...</span> </p>
</div>
<div class="video-container">
<video width="560" height="315" poster="http://URL of appropriately sized poster image here" onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
<source src="http://URL of your video.mp4" type="video/mp4" /></source>
Your browser does not support HTML5 video.
</video>
</div> <p class="text" style="text-align:center;width:100%;">
<span style="font-weight:bold;font-size:75%;color:#cc0000;">Tap in or out of the video<br>to control playing it...</span> </p>
</body>
</html>
This concludes our Tutorial on Adding Video To A Webpage