rendering outside of it's container?

Question

这里有点困惑。我的代码有什么问题，或者这表明JS / PHP冲突或iframe错误我根本不知道......？

以下iframe（vimeo embed）始终在其容器div之外呈现。

这个HTML标记：

<div class="slider">

  <!--- Image --->
  <div class="single-event-image-bg tb-overlay single-event-slides" style="background-image:url(<?php echo tribe_event_featured_image( null, 'large', false, false ); ?>);">
  </div>

  <!-- Video -->
  <div class="iframe-container">
    <iframe id="single-event-video" class="single-event-video" width="668" height="415" src="https://player.vimeo.com/video/320740213" frameborder="0" mozallowfullscreen webkitallowfullscreen allowfullscreen>
    </iframe>
  </div>
</div>

渲染这个：

我尝试使用不同的标签，删除PHP，类名称和停用javascript滑块我正试图让它在里面工作。即使没有上述任何一个，它仍然在div之外呈现。

iframe上的CSS很简单：

iframe { display: block; position: relative; width:100% max-width:100% }

编辑：已在CodePen和StackOverflow运行代码段上测试过。标记似乎工作正常。所以问题仅限于我们的网站，对可能导致此行为的任何想法？谢谢

Answer 1

已解决：我仍然不完全确定为什么从父容器中删除元素ID解决了这个问题。 ID我没有被任何CSS或Javascript使用，也不是常见的ID名称。但是，某些地方的ID名称必定存在冲突，这反过来影响了iframe标记。