/*
The other reason for the empty div is so that we have somewhere to target with
the javascript as the area to plug with the movie code. Let's write the simple
javascript do do the job:
*/
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$('#movie-area').load('movie.html');
});
</script>
/*
I am using jQuery to do this. jQuery just makes this job much easier. The above
code, in plain english: "Wait for the entire page to load, then find the div
with the id of "movie-area", then go get the file "movie.html" and insert it's
contents inside the found div. The "movie.html" file will of course include
whatever the markup is for the video I want. Likely some kind of object or
script.
*/
First, we make a place on our page for the movie. An empty div will do:
<div id="movie-area">
</div>
/*
This way we can style that area with CSS. This is a good idea so when the movie does get added, it doesn't abruptly move things out of the way to make room for itself. We'll also make the area black, much more movie-like:
*/
#movie-area {
width: 320px;
height: 240px;
background: black;
}