Add or Remove HTML code on Windows Resize - php

Question

I'm working on a responsive website. I'm using CSS Media Queries and Adaptive Images (http://adaptive-images.com/) to render each page correctly on different devices.
My problem is that some elements are downloaded by the browser even if there are hidden! For instance, a element with the property {display:none;} is downloaded despite the fact that I don't want it.
So, here is my question: is there a way to add or remove HTML code depending on the device's screen-size?
By reading the code of "Adaptive Images" script, I saw they used a cookie, which stores the screen-size value.
<script>
document.cookie='resolution='+(window.innerWidth)+'; path=/';
window.addEventListener("resize", function() {
document.cookie='resolution='+(window.innerWidth)+'; path=/';
}, false);
</script>
So, I tried to read this cookie with a PHP function:
<?php
$fallback_res = 481;
$res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] :
$fallback_resolution; // Get the viewport resolution in $res variable
?>
It allows me to write a very useful PHP condition :
<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px
{
echo '<video>...</video>'; // Display the video
}
else { //if the screen is smaller
echo ''; // Echo something else
}
?>
It work very well. If the viewport is < 481px, the video is not downloaded. If the viewport is > 481px, the video is downloaded. But it only works, on page load! If I load the page with a 480-wide-opened-browser (=video not loaded), and then resize my browser to higher resolution, there is a big hole in the middle of the page.
What I need is to reload some part of the code on window resize. (Each time I resize the browser window, I want the $res condition to be updated automatically, and the following code as well)
Thanks.

Answer 1

if you combine blow jquery code with ajax , maybe you can do that .
$(window).resize(function() {
if($(window).width() > 480 )
{
#ajax code for download video
#or use .after in jquery
}
})

Answer 2

Html will looks like
<div id="phone">Content For the below 450px </div>
<div id="desktop">Content For the above 450px </div>
Add jQuery
if($(window).width() < 450 )
{
$('#desktop').remove();
}
else
{
$('#phone').remove();
}