$(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>The staff who write this code for our company website has left company almost 10 years cannot contact him to fix.
The site is www.giffindex.com (I want the VDO auto play). The problem is it need to click logo on top left corner 1 time for trigger VDO to running.
What can I try next?
There are 3 ways how you could make autoload work:
setTimeout() to manipulate the browser (see this answer).muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).