Home » Javascript » 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?

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?

Posted by: admin August 19, 2018 Leave a comment

Questions:

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..

Answers: