How can I set video not to auto play (but click on logo top left corner 1 times it trigger auto play)

$(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?

Answer

There are 3 ways how you could make autoload work:

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.
You could use setTimeout() to manipulate the browser (see this answer).
You could use the attribute muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).

Advertisement

Answer