In this series of articles, we will be creating an animation engine that can create dynamic video content programmatically.
An Birds-Eye-View of The Code so Far
The first thing we want to do is include both jQuery and Anime.js into our file. These libraries will make things a lot easier.
After that, we want to start our HTML and BODY tags.
Then, we create a new div with a class of ‘video’.
At the top of the page, we have the CSS defined in some tags.</p>
Here, we are removing the default margin and padding for the body.
Then, we set the position of the ‘video’ div to ‘absolute’. This is so we can move it around. Then we set the ‘video’ div’s background color to black. After that, make set the ‘video’ div to start 5% from the left and 5% from the top. Finally, we set the width of the ‘video’ div to 90% of the width of the page.
Notice That We Did Not Set a Height For The ‘Video’ Div
As you can see in the image above, we have set the width of the ‘video’ div to whatever the height of the ‘video’ div is divided by 1.777777777777778.
Yeah, But Why 1.777777777777778?
So, that means if the height of the ‘video’ window is whatever it’s height is divided by that number, it will always have a 16:9 aspect. And remember, in the CSS we defined the ‘video’ div’s width as 90% of the window.
Great! Our Video Window Works, Sorta
As you can see in the image above, everything looks as it should. But what happens when you scale the window?
As you can see, when the window is resized, the video window does not scale proportionally.
That’s was these few lines of code are for:
The code above runs the same height scale function on the ‘video’ div every time the window is resized.
Here is the result:
Check this out: The State of Information Technology in 2020