I am loading image instead of iframe & onclick on image playing video on same place using jquery. Working for desktop but not for mobile devices?

Question

Due to th page load-time issue, I am loading image instead of iframe-video & onclick on that image playing video on same place using jquery. Working fine for desktop but not for mobile devices??

I want to replace image with autoplay iframe-video after clicking on image using jquery. I did it, working good for desktops but during mobile devices image getting replace by iframe video.. but iframe video not performing autoplay?? which is happening in desktops..

My code snippet:

HTML:

<div class="laptop-wrapper" id="lptop_vdo" style="display: none;">              
</div>

<div class="laptop-wrapper" id="lptop_img">
      <img class="img-responsive" src="<?php echo BASE_IMAGE; ?>iframeVdo.jpg">            
</div>

Jquery:

<script>
    $(document).ready(function() {
      $('#lptop_img').on('click', function(ev) {

          $('#lptop_img').hide();
          $('#lptop_vdo').show();
          $('#lptop_vdo').html('<iframe id="blz_main_vdo" width="560" height="315" src="https://www.youtube.com/embed/QQDVzP__Xhs?rel=0&amp;showinfo=0&amp;autoplay=1" allow="autoplay; encrypted-media" frameborder="0" allowfullscreen data-play="1"></iframe>');
          ev.preventDefault();

      });
    });
</script>

why iframe autoplay not working in mobile devices (I am trying with jquery, replacing image with iframe autoplay. But after replacement autoplay not happening only for mobile devices??)

Please give me some ideas. because in my website much more videos on pages..

Answer 1

you can't do autoplay on all mobile devices... Some of the devices block autoplay like iOS...

There are many questions like this on this stackoverflow.. you could have checked them like Autoplay audio files on an iPad with HTML5, Youtube autoplay not working on mobile devices with embedded HTML5 player and Youtube embedded video: autoplay feature not working in iphone