Why can't I get this video to automatically start on page load on mobile?

I have this video as a background with Bootstrap that I would like to autoplay on page load. It works fine with desktop Chrome, but not so much for mobile.

It is a small, .mp4 file that is created using:

<video class="video-fluid" id="video1" autoplay loop>
    <source src="videos/light-swaying.mp4" type="video/mp4" />

The only thing that shows up on mobile is just a still of the first frame, not a moving video. I added this script at the bottom of my body, and it actually starts the video fine. It loops and everything:

<script type="text/javascript">
    var video = document.getElementById('video1');
    var aboveView = document.getElementById('video-carousel-example2');
    aboveView.addEventListener('click', function () {
        video.autoplay = true;
    }, false);

The only problem is, though, I have to click on the video to actually start it. I tried this script in the same spot, and no luck whatsoever:

<script type="text/javascript">
    var video1 = document.getElementById('video1');
    video1.autoplay = true;

So does anyone have any idea how to fix this and make it play automatically?

Answers 1

  • Mostly we too find this issues in ipad and tablets because ipad and tablet doesnt support the autoplay

    To see a full list of these restrictions, see the official docs: https://webkit.org/blog/6784/new-video-policies-for-ios/

    for that you need to trigger your click function by checking your monitor resolution i am not familiar with javascript so i am written this using jquery

          var screenWidth = $( window ).width();
           if(screenWidth <= 1024)//just i am checking for ipad only
                var video1 = document.getElementById('video1');

Related Articles