$(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 >
    <video autoplay loop preload poster="https://www.giffindex.com/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>

sorry never use this site before. and the staff who write this code for our company website has left company almost 10 years cannot contact him to fix.

The site : www.giffindex.com (I want the VDO auto play) but the problem is , it need to click logo on top left corner 1 time for trigger VDO to running.

Please help any suggest code Thank you in advance.

CodePudding user response：

There are 3 ways how you could make autoload work:

1. The user needs to interact with your website first. In your case, when clicking on the logo, autoload works, because the user has already interacted with your website.
2. You could use setTimeout() to manipulate the browser (see this answer).
3. You could use the attribute muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).