0

I have an iframe fullscreen, how can I make a div that is on that iframe? I'm trying to do something like the Netflix player, just more static WITHOUT javascript so there is the iframe, then there is a div with some buttons and functions in php but the div has a background cutted, on top of the iframe. Is it doable? LIKE THIS IMAGE CHECK PLS

Sboni Marco
  • 1
  • 1
  • Yes, it is doable. – Smuuf Mar 13 '18 at 08:13
  • Is that a must to use an IFRAME? It's 2018, and IFRAME should be gone for good. – Raptor Mar 13 '18 at 08:13
  • I have an header("Content-type: image/jpg"); imagepng($im); so the only way to display this is to make an iframe to it in order to be able to use functions and html on the "main" page – Sboni Marco Mar 13 '18 at 08:15
  • so you are trying to display a php generated image is that it? – Professor Abronsius Mar 13 '18 at 08:16
  • @Raptor _(Not saying this is what the op needs, but...)_ Even in 2018 you might sometimes need to include a foreign page within portion of your page having a completely separated context _(e.g. untrusted, 3rd party app)_. – Smuuf Mar 13 '18 at 08:17
  • I render the image, apply filters trough channels, and output image with watermarks, but I want a div that is on top of that like the image in the post on which I have some buttons (html/css/php) – Sboni Marco Mar 13 '18 at 08:17
  • are you aware that the php code that generates the image can be saved as a script itself and then used as the `src` attribute to an `img` element - ie: ``? – Professor Abronsius Mar 13 '18 at 08:21
  • 1
    @Smuuf agree to some extent, but IFRAME is **not** the right way to do so. It is not responsive at all, and it can be potentially led to security concerns. Read [this](https://stackoverflow.com/questions/7289139/why-are-iframes-considered-dangerous-and-a-security-risk) – Raptor Mar 13 '18 at 08:22

1 Answers1

0

Here is a possible solution : 

<div class="iframe_container">
    <iframe width="100%" height="700px"></iframe>
    <div class="custom_functions"></div>
</div>

<style type="text/css">
    div.iframe_container {position: relative; width: 100%; height: 700px; background-color: #F0F;}
    div.custom_functions {position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1; background-color: #FF0; height: 200px;}
</style>

update the values as needed and make it fit your needs

kevinniel
  • 1,088
  • 1
  • 6
  • 14