Greetings everyone, I am excited to share my first post here. After some thorough research, I stumbled upon a piece of code for an external .js file that is almost flawless in its ability to load an image instead of a video if the screen size is less than or equal to 1024:
$(document).ready(function() {
$(window).resize(function(){
var width = $("body").width();
if(width <= 1024){
$("#media_div").html("<img src='/img/benhat1280.jpg' />");
}else{
$("#media_div").html('<video src="/img/CT_HQ.mp4" autoplay mute loop />');
$("#media_div img").css("height","auto");
$("#media_div").fadeIn(2000);
}
})
});
However, when the screen size is greater than 1024, the video will only load after resizing the browser window. Additionally, the .fadein function seems to be malfunctioning.
Warm regards, Benjamin