Используйте значок воспроизведения для воспроизведения видео YouTube by JS в iframe, оно хорошо на настольном компьютере, но не работает на мобильных устройствах (как iOS, так и Android) - PullRequest
Новая
       29

Используйте значок воспроизведения для воспроизведения видео YouTube by JS в iframe, оно хорошо на настольном компьютере, но не работает на мобильных устройствах (как iOS, так и Android)

0 голосов
/ 10 января 2019

Я использую значок воспроизведения и изображения, при нажатии на изображение запускается видео YouTube. Это хорошо на рабочем столе, но на мобильном телефоне не работает.

Мой HTML: 

<div class="video-wrapper js-set-bg-blog-thumb">
  <div class="overlay-play-video js-play-yoututbe">
      <span class="icon-play"><img alt="Image" src="{{media url="wysiwyg/video/icon-play.png"}}" /></span>
  </div>
  <img alt="Image" class="video-banner" src="{{media url="wysiwyg/general/career-pic.jpg"}}" />
 <div class="embed-responsive embed-responsive-16by9 js-video-youtube">             
     <iframe height="100%" src="https://www.youtube.com/embed/UcjRl2ahmRM?" width="100%"></iframe>
 </div>

А это мой JS: 

jQuery(document).ready(function() {
    jQuery('.js-set-bg-blog-thumb').each(function() {
        var imagesURLs = jQuery(this).find('.video-banner').attr('src');
        jQuery(this).css('background-image', 'url(' + imagesURLs + ')');
    });
    jQuery('.js-play-yoututbe').click(function(ev) {
        var videoWrapper = jQuery(this).siblings('.js-video-youtube');
        videoWrapper.find('iframe')[0].src += "rel=0&autoplay=1";
        videoWrapper.find('iframe').attr({
            'allow': 'autoplay',
            'allowfullscreen': 'allowfullscreen'
        });
        videoWrapper.css('opacity', '1');
        jQuery(this).fadeOut('fast');
        ev.preventDefault();
    });
});
...