<iframe> рендеринг вне его <div>контейнера? - PullRequest
Новая
       61

<iframe> рендеринг вне его <div>контейнера?

0 голосов
/ 01 марта 2019

Слегка сбит с толку здесь.Что-то не так с моим кодом или это говорит о конфликте 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>

Рендерит это:

enter image description here

Я пробовалиспользуя разные теги, удаляя php, имена классов и деактивируя слайдер javascript, я пытаюсь заставить его работать внутри.Даже без всего вышеперечисленного, он по-прежнему отображается за пределами div.

CSS на iframe просто: 

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

РЕДАКТИРОВАТЬ: протестировано на CodePen и StackOverflowзапустить фрагмент.Кажется, разметка работает нормально.Таким образом, проблема ограничена нашим сайтом, есть мысли о том, что может быть причиной такого поведения?Спасибо

1 Ответ

0 голосов
/ 01 марта 2019

РАЗРЕШЕНО: Я все еще не совсем уверен, почему, но удаление идентификатора элемента из родительского контейнера решило эту проблему.Идентификатор не использовался ни одним CSS или Javascript, который я мог найти, и при этом это не было общим именем идентификатора.Однако должен быть конфликт с чем-то, нацеленным на имя идентификатора, что в свою очередь повлияло на разметку iframe.

...