Nunzio's Little Place On The Web
Using IFRAMES for Embedded Video

Article by Nunzio Fartalone (Nunzio390)
*Note: Also see another article by Nunzio containing Nunzio's IFRAME Examples

An IFrame (Inline Frame) is an HTML element which makes it possible to embed another HTML document inside the main document. In essence, it's a floating frame inserted within a web page which is not bound to the side of a browser window.

This article demonstrates how you can use an IFrame to target a separate page that utilizes HTML5 video encoding to play a video file, and still allow the main page that contains the IFrame to conform to HTML 4.01 specs when validating the page through the W3C Markup Validator.

IFrame Video Example:

After you start the video above, the video will "appear" to be playing directly on this page, but in reality what you are seeing is an IFrame targeting a completely separate page that actually contains the HTML5 video encoding. Why did I do it that way? Well that's part of the beauty of IFrames. There is NO way in hell that this page would ever get through the W3C Markup Validator if it detected the "extended" HTML5 coding I use if included it directly on this page. So, in order to have this page pass as valid HTML 4.01, I use the IFrame where the "bad" code (according to the W3C consortium geeks) cannot be parsed/picked up on this page. Using an IFrame in this way allows this page to indeed validate as valid HTML 4.01.

Code for the above IFrame:

Code for the separate page targeted in the IFrame above (Dogsmoke.html):

In the separate page targeted in the IFrame that plays the video file, it is very important to have margins and padding set to ZERO at that targeted page. If not, placement within the IFrame gets all messed up.

So, when examining the above source code of that page, you will see that it also contains CSS styling that will eliminate page borders...

CSS styling that I've used in the above page to eliminate page borders:
<style type="text/css">
body {
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
}
</style>

This page validates as Valid HTML 4.01... Valid HTML 4.01! This page validates as Valid CSS... Valid CSS!