Currently, I am working on a webpage where I have inserted an iframe in the background because other div elements on the page "interact with it". Even though I have used z-index to make it visible in the background, I am facing issues with controlling it since the usual controls are missing. Below is the main code snippet:
Here's the HTML:
<div class="bg-about">
<iframe src="https://player.vimeo.com/video/54960454?title=0&byline=0&portrait=0;autoplay=1"></iframe>
<div id="iframe"></div>
</div>
Here's the CSS:
iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
Do you have any suggestions on how to solve this issue? I really need to have control over the iframe. Note: Although the background is technically not behind anything, it needs to be placed as a background due to formatting constraints. I'm not sure why it's being displayed incorrectly.