Iframe|youtube Iframe上的移动后退按钮

Iframe | Mobile back button on youtube iframe

本文关键字：Iframe 按钮 移动 youtube      更新时间：2023-09-26

我有一个视频，它出现在Youtube的灯箱中，是一个自定义的视频，而不是插件。

在移动设备上，当显示人像时，视频会横跨整个页面宽度，看起来很好看，并在顶部和底部留出一些空间来点击。

问题是，当我横向浏览时，视频会充满整个屏幕，你无法回到页面上。我最初的反应是按下手机的后退按钮，但我不知道如何简单地移除我的灯箱。JS中有没有办法让手机后退按钮上的onclick？

它进入全屏的原因是因为我保持了纵横比

        var width: number = $('.youtube-video-lightbox').outerWidth();
        var height: number = (width / 16) * 9;
        $('.youtube-video-lightbox').height(height);

您可以尝试使用以下代码：

您需要收听导航事件和state.direction.

 $(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // close the light box here
  }
  if (direction == 'forward') {
    // do something else
  }
});

更多细节在此链接

在我的手机上测试了上面的代码，它运行良好。关闭灯箱后，您可能需要停止程序流，以便停止后退按钮的默认导航。

编织：http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850

你有没有想过尝试一个基于纯CSS的Lightbox？

$('[data-target]').on('click', function() {
  $('.page').attr('src', $(this).attr('data-target'));
});
$('#call').on('change', function() {
  (this.checked) ? "" : $('.page').attr('src', '');
});
input[id=call] {
  display: none;
}
a {
  margin: 1em;
}
.bg,
.content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all ease-in 150ms;
}
.bg {
  background: #515151;
  background: rgba(0, 0, 0, 0.58);
}
.content {
  margin: 2.6352em;
  padding: 1em;
  background: #fff;
}
input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
  visibility: visible;
  opacity: 1;
}
.block {
  display: block;
}
.pointer {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="call" type="checkbox" />
<p>
  <a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block">
    <label for="call" class="pointer">Bing</label>
  </a>
  <a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block">
    <label for="call" class="pointer">DuckDuckGo</label>
  </a>
</p>
<label for="call" class="bg pointer"></label>
<div class="content">
  <iframe width="100%" height="100%" frameborder="0" class="page"></iframe>
</div>

相关文章：