javascript - YouTube iFrame 由于边距无法点击(Bootstrap)

Question

我的 YouTube iFrame 有问题:当我设置边距(负边距)时它变得不可点击。那不是我想要的!我希望访问者能够在我的网站上播放视频。

要添加更多上下文，这是一个 Bootstrap 网站，视频在时间轴中。我设置了负边距，这样我就不会丢失页面空间。如果我不设置边距，我会得到一个左边的元素 - 右边的一切都是空白的 - 然后在滚动到第一个元素的末尾后，我会在右边得到第二个 - 但左边的一切都是空白的，并且很快...我尝试使用相对和绝对位置，但它在 Bootstrap 时间轴中不起作用(当我更改它时，每个元素都会一起崩溃)。

你对这个问题有什么想法或线索吗？

这是我的 HTML 的样子:

<li style="margin-top: -140px">
      <div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
      <div class="timeline-panel">
        <div class="timeline-heading">
          <h4 class="timeline-title">Solitaire Android app</h4>
          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
        </div>
        <div class="timeline-body">
          <p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
          This feature exists on iOS but not on Android, as far as I know. 
          So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
          You can play by dragging and dropping cards on the screen.
          I plan to publish it on the Play Store! </p>
            <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
          </div>
          <p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
        </div>
      </div>
    </li>

这是我的 WIP 网站的链接，如果它有帮助的话:)

http://horlogehumaine.net16.net/slegras/code.html

Answer 1

您是指“Solitaire Android App”中的小视频吗？

如果是这样，则它与其他“覆盖”它的相对/绝对定位的事物相对定位。

给 .embed-responsive z-index:1;