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

Posted 2023-05-09

【中文标题】youtube - 无法在轮播/滑块中滑过 iframe

【英文标题】：youtube - cannot swipe past iframe in carousel / slider

【发布时间】：2015-03-26 16:03:55

【问题描述】：

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

很烂。

有什么好的方法可以克服吗？

【问题讨论】：

您可以做的一件事是在视频上放置一个空的<div>。这应该允许您保留滑动功能。

【参考方案1】：

简而言之，我发现我做错了。

滑块脚本在两个桌面上都运行良好。在移动设备上它可以正常工作，但您无法滑过嵌入视频的 iframe。

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

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

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

我在this article找到了答案

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

【讨论】：

图像在做什么？是打开视频吗？你能发布更多细节吗？谢谢！

对不起，我真的不记得了，因为那个项目发生在很久以前，我不再和公司合作了。但是我认为它只是显示了覆盖播放按钮的图像。我不记得单击它是否打开了 iframe，或者我是否必须使用 jquery 添加 iframe 并显示它。

【参考方案2】：

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

rel=0&enablejsapi=1

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

$('.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"   ></div>
    <div class="youTubeVideo">
      <div class="video tube"></div>
      <iframe id="videoSwipe"   src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
    </div>
    <div><img src="http://placekitten.com/500/480"   ></div>
    <div><img src="http://placekitten.com/500/460"   ></div>
    <div><img src="http://placekitten.com/500/440"   ></div>
    <div><img src="http://placekitten.com/500/420"   ></div>
  </div>
</div>