Fancybox в контейнере изображений

Question

можно настроить для загрузки fancybox (я использую fancybox 3) в контейнер изображений? В документации нет ничего подобного, может быть, какой-то хак для этого?

У меня есть простой HTML:

<div id="discount-popup">
  <h2>Discount</h2>
  <form action="" method="POST">
    <label for="email-input">Email</label>
    <input id="email-input" type="email" name="email" value="" required /><br />
    <input type="submit" name="send-discount" value="Send" />
</form>

И jquery для запуска через 5 с после загрузки страницы:

if ($('#discount-popup').length) {
  setTimeout(function () {
    $.fancybox({
      autoSize: false,
      height: 'auto',
      minHeight: 385,
      width: 650,
      href: '/index/discount-popup',
      type: 'iframe'
    });
  }, 5000);
}

Содержимое всплывающего окна будет в верхней части изображения. Контейнер изображения может быть примерно таким:

Answer 1

Это может быть что-то вроде этого, но до сих пор неясно, что вы просите:

.fancybox-slide--iframe .fancybox-content {
  width  : 780px;
  height : 460px;
  margin: 0;
  padding: 50px 100px 200px 100px;
  background: transparent url(https://i.stack.imgur.com/eZUaW.jpg) top left no-repeat;
  background-size: cover;
}

https://codepen.io/anon/pen/MqzYWv?editors=1100