youtube

Question

我有一个带有旋转木马的响应式网站。用户可以将 youtube 视频作为幻灯片之一嵌入。在桌面上这工作正常。然而，在移动设备上，iframe 显然会吃掉所有滑动事件，您无法滑动视频。我们不得不通过替换视频图像然后使用 window.open() 打开带有视频的新 window 来解决这个问题。

糟透了。

有什么好的方法可以解决这个问题吗？

Answer 1

总之，我发现我做错了。

滑块脚本在两种桌面上都运行良好。在移动设备上它可以工作，除非你不能滑过嵌入视频的 iframe。

我的示例 iframe 是： <iframe width="1280" height="720" src="//www.youtube.com/embed/Lzbr6fPDmkE" frameborder="0" allowfullscreen></iframe>（仅供参考，如果您是陆军退伍军人，这是一个有趣的视频）

我发现了一个（有点明显的）事实，即 youtube 也有一个缩略图 url。所以在移动设备上我添加了以下 img 标签：

<img src="http://i.ytimg.com/vi/Lzbr6fPDmkE/hqdefault.jpg" alt="1300x650" />

我在this article

中找到了答案

我使用的 url 与他们的不同，因为我从 gmail 邮件中嵌入的 youtube 缩略图上撕下了它。

Answer 2

必须在 URL 中包含以下属性。

rel=0&enablejsapi=1

注意：浏览注释行并在标题部分添加这些滑块库文件并保存。添加所有内容后，您必须在浏览器中打开文件。您可以看到滑块。如果发现任何问题，请在下面评论。

$('.slider').click();
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('videoSwipe', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(e) {
  $('.youTubeVideo').find('.video').addClass('video-overlay');
}

function OverlayOnVideo(playerStatus) {
  if (playerStatus == 2) {
    $('.youTubeVideo').find('.video').addClass('video-overlay');
    var iframeHeight=$('#videoSwipe').height()-40;
  var overlayHeight=$(document).find('.video-overlay');
  if ( overlayHeight.length >= 1 ) {
   overlayHeight.css('height', iframeHeight+'px');
    }else{
   $('.youTubeVideo .tube').removeAttr( 'style' );
  }
  }
}

function onPlayerStateChange(e) {
  OverlayOnVideo(e.data);
}

$(document).on("click", ".video-overlay", function() {
  if (player) {
    player.playVideo();
    $('.youTubeVideo').find('.video').removeClass('video-overlay');
    $('.youTubeVideo .tube').removeAttr( 'style' );
  }
});

.youTubeVideo {
  position: relative;
}

#wrapper {
  width: 30%;
  margin: auto;
}

.slick-list draggable {
  margin-top: 3%;
}

body {
  outline: none;
  background: black;
}

:focus {
  outline: none;
}

.slick-list.draggable {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="slider">
    <div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
    <div class="youTubeVideo">
      <div class="video tube"></div>
      <iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
    </div>
    <div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
  </div>
</div>

youtube - 无法在轮播/滑块中滑过 iframe

youtube - cannot swipe past iframe in carousel / slider

javascript

jquery

iframe

youtube-api