$(document).ready(function () { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $(".videoslide") .css("background","#000 url('https://giffindex.com/images/giffindexdeskmat2022.jpg') center") .css("background-size","cover") .css("min-height","300px") $(".videoslide .wrapper").css('background', 'rgba(0,0,0,.2)'); $(".videoslide .cta, .videoslide h1, .videoslide p").delay(500).fadeIn(600); } else { var posterImage = new Image(); posterImage.src = "https://giffindex.com/images/giffindexmanufacturer2022.jpg"; posterImage.onload = (function() { $(".videoslide .cta, .videoslide h1, .videoslide p").delay(400).fadeIn(300); }); var videoHero = document.getElementById("videoHero"); videoHero.src = "https://giffindex.com/download/giffindexdeskmat1.mp4"; videoHero.load(); videoHero.addEventListener('loadeddata', function() { $(".videoslide .wrapper").css('background', 'rgba(0,0,0,0.1)'); $(".videoslide video").fadeIn(200); updateVideoHeight(); }, false); } $(window).resize(function () { updateVideoHeight(); }); }); function updateVideoHeight() { if($('.videoslide').height() > $('.videoslide video').height()) { $('.videoslide video').height($('.videoslide').height()); $('.videoslide video').width('auto'); } if($('.videoslide').width() >= $('.videoslide video').width()) { $('.videoslide video').height('auto'); $('.videoslide video').width('100%'); } }

 <script src="js/video.js" defer></script> <div class="videoslide"> <video autoplay loop preload poster="https://www.giffindex.com/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>