Determining an available viewport for use
If you have spent any time developing content for responsive layouts, you will have no doubt come across media queries. The same applied to videos; you could typically see something akin to the following (simplified) example:
<video controls> <source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)"> <source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)"> </video>
Unfortunately, most browsers have since removed support for media queries. This is largely due to the poor user experience we get if the video is suddenly interrupted when resizing the screen. Fortunately, we can produce similar effects, although we need to resort to JavaScript or jQuery to achieve this. In this next example, we're going to show a small video if the screen is resized to a small window, or hide it when displayed in full screen. Let's take a look at how we can achieve this:
We'll begin with extracting...
