Although I typically focus on Media Queries, I need to come up with a different strategy.
On my website, I have a full-screen video background that is rendered in VP8 & VP9 codec using Adobe After Effects animations. Everything looks great in 1080 x 1920 resolution, but when I scale down my browser to 1366 x 768 (Laptop), the site appears poorly as the videos are heavily cropped.
In an attempt to address this issue, I created a separate HTML file and rendered a special video in 480p resolution. This solution actually looks quite good. However, I'm unable to automatically redirect users to this version if they scale down the browser in real-time.
I require a script that can monitor the width of the browser continuously and direct users to the dedicated site where the videos are optimized at 480p resolution (in webm, .mp4, .ogv formats) instead of 720p. Unfortunately, implementing this cannot be achieved through Media Queries alone.
In my HTML code:
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/redirect.js"></script>
<body>
<div id="big"><video preload="auto" autoplay loop muted="muted" volume="0">
<source src="video/of.webm" type='video/webm; codecs="vp9"'></video></div>
<div id="menu"><a href="intro.html" class="ex2-fadeout" >In</a> <a href="cut.html" class="ex2-fadeout">Ofe</a> <a href="portfolio.html" class="ex2-fadeout">Pf</a> <a href="kontacy.html" class="ex2-fadeout">Contact</a></div>
</body></html>
In my redirect.js file, I am utilizing the following script:
$(window).resize(function () {
/* call some function */
});
var width = $(window).width();
var height = $(window).height();
$(document).ready(function(){
//this is called only once
r($(window).height());
});
$(window).resize(function () {
//this is called everytime when you resize window
r($(window).height());
});
function r(h) {
if (h > 1024) window.location.replace("http://google.com"); //this is edited
return 0;
}
What am I doing wrong here?