0

Hi I want to make banner appear on an iframe player. Something like this: https://i.stack.imgur.com/jTor0.jpg of course with a close button. My html code is like this

<div id="content-embed" style="min-height: 500px;">                 
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
    </iframe>
</div>

css

#content-embed {
    width: 100%;
    position: relative;
}

What I have tried so far (sorry, I'm not master in css and html)

<div id="content-embed" style="min-height: 500px;">                 
    <iframe id="iframe-embed" width="100%" height="500px" scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="z-index: 0;">
    </iframe>
    <div style="z-index: 1;"><img src="/banner.jpg" /></div>
</div>
buli
  • 146
  • 8
  • What exactly have you tried and where is the rest of the code (the banner for example)? – Jacques Marais Jul 16 '17 at 16:30
  • I tried to set z index inside that content-embed div on iframe and making a another div with banner. I edited first post. – buli Jul 16 '17 at 16:33
  • Possible duplicate of [Stacking DIVs on top of each other?](https://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other) – Makyen Jul 16 '17 at 23:26

1 Answers1

1

You need to use position: relative in the wrapper of iframe and the image, and then use position: absolute in the image to set its position in the element, like in the example:

https://jsfiddle.net/kLaj5gjj/

.relative-wrapper {
  position: relative;
}

.iframe {
  /* simulating iframe */
  width: 500px;
  height: 300px;
  background-color: black;
}

.banner {
  /* banner positioning */
  position: absolute;
  top: 50%;
  left: 40%;
}

.some-image {
  /* simulating image size */
  width: 200px;
  height: 50px;
  background-color: red;
}
<div class="relative-wrapper">
  <!-- simulating iframe -->
  <div class="iframe"></div>
  
  <div class="banner">
    <!-- simulatin image -->
    <img class="some-image" />
  </div>
</div>
Christian Valentin
  • 502
  • 2
  • 11
  • Thank you it works. Now I have another problem - banner is 300x250px and how can I make that responsive? Because on desktop it works good (but I have to work with positioning a bit, cause it's not always in the center) but on mobile the banner goes out of bounds of the player – buli Jul 16 '17 at 17:02
  • You can use the property `max-width: 100%`, so the image can't escape from the wrapper. Also, add `height: auto`, so the height will be automatically adapted. – Christian Valentin Jul 16 '17 at 20:37