Make iframes content overflow outside iframe extents

javascript jquery html css iframe

31,030

Solution 1

No, it isn't possible...

The document from iframe is a completely another document, and the browser security will not let you to do this...

Edit: you can use fullscreen property using transparent background color for container and put there your embedded video.

The fullscreen code was described in this answer.

Solution 2

[updated and Edited]

window.open works fine for IE ( as in window.open('iframe.html','','fullscreen=1,channelmode=1'); but I want to find a proper way for IE so that it doesn't reload the contents as I did for the others) but I found you a better way that works on chrome, safari and FF since they don't support theater mode,

your iframe should be like :

<iframe src="iframe.html" allowFullScreen></iframe>

this is the content page of your iframe:

<html>
<head>
<title></title>
<style type="text/css">
.fullScreen{
    width:100%;
    height:100%;
}
.minScreen{
    width:auto;
    height: auto;
}
</style>
<script type="text/javascript" src="jquery-1.10.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var element = document.getElementById('container');
        var maxed = false;
        $('#max').click(function(){
            if(maxed){
                if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen(); 
                    element.className = "minScreen";
                    maxed = false;
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                    element.className = "minScreen";
                    maxed = false;
                }
            }else{
                if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                    element.className = "fullScreen";
                    maxed = true;
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                    element.className = "fullScreen";
                    maxed = true;
                }
            }
        });
    });
</script>
</head>
<body>
<div id="container">
    <button id="max">click to maximize/minimize</button>
</div>
</body>
</html>

you can supply that with css to correct the containers height and width, using classes (addClass and removeClass) when maximized or minimized/closed (style added to the code)

IE compatibility function is on the way ..

EDIT: maybe you should look at the problem from another angle if you don't want to use windows or fullscreen.

the solution would be discarding the iframe which is restricting the accessibility and replacing it with a div that has css overflow:hidden and then populate this div with your iframe page's contents (you can use ajax or any other method to load the contents). tada, you have something like an iframe but it is an element of the same document. then, you can control the overflow in two ways:

1- toggle the container's css between overflow:hidden and visible or auto.

2- relocate the element outside the container div and use absolute positioning to show it over other elements.

note: don't be afraid of losing the scroll bar, you can build your own or just link your top css of the contents with the jquery ui slider's value with absolute content's positioning and you are good to go.

Solution 3

The other way not suggested here would be to use two iframes. The second would float over the first one and would contain video. You can communicate between windows with window.postMessage. But if you have control over iframe and top page then you could put the video in div in top page. Still both pages can communicate with window.postMessage.

31,030

Author by

sazr

Updated on July 20, 2022

Comments

sazr almost 2 years
I have a webpage that contains an iframe. Inside that iframe is an embedded Youtube video. When I play this video I make it scale up (grow) in size. As the video grows, not all the video is visible because the iframe is not wide enough.

Is it possible to make the iframe 'Overflow its content', ie make the video visible outside the iframe width (please see below screen captures for a clear example of what I am trying to achieve).

This is how the webpage currently looks:

This is how I would like to make the video look when it has fully grown:

Note I just cant make the iframe wider. I've tried giving the iframe (and all its child elements) the CSS overflow: visible but it doesn't change anything.

This is a simple example of how the webpage is arranged:
```
....head, opening html tag, etc. up here
<body>
  <div id="outerContainer" style="overflow: visible">
     <div id="navBar">...</div>
     <div id="content style="overflow: visible">
        <iframe src="myHelpDocumentation.html" style="overflow: visible">
           
           

        </iframe>
     </div>
  </div>
</body>
```
Do you know of a way using CSS or HTML to show the video outside the iframe extents? I could potentially use Javascript to remove the video(iframe) from the iframe and place it in the main webpage but this would be very bad website design dont you think?
CME64 almost 11 years

it is possible, please check my code before saying that, I was convinced it was impossible an hour ago !
Ionică Bizău almost 11 years

@CME64 Basically you use fullscreen property, not what OP asked.
CME64 almost 11 years

well, you're right, but the fullscreen solution is what he should consider, otherwise it is a new window and he doesn't want that for sure as it was my first suggestion. if his problem was that the video is smaller than the frame, he should consider re-sizing the video container's dimensions.
Ionică Bizău almost 11 years

I hit an idea: he can use a transparent color! So, +1 for your post.
CME64 almost 11 years

and +1 for your suggestion
Ionică Bizău almost 11 years

@CME64 I think that this is the answer: stackoverflow.com/q/16163089/1420197
CME64 almost 11 years

I already did that manually inside .fullScreen and tried in body too, no luck
sazr almost 11 years

thanks for the code. But isn't simpler to just append the video div to the outer document? Ie, $("#myVideo").append($("#myOuterDocument").body).css("positi‌on", "absolute").css("top", "150px");. This was my fallback solution but I am worried its not good website development practices - removing divs from iframes and inserting them into other webpages.
CME64 almost 11 years

yes this can be the only way if you are not using fullscreen nor window, I thought of it, but then I thought of how to select the element from within the iframe given that it is a different document that contains it. I didn't test that theory but here you are telling me all about it.
Sanghyun Lee almost 9 years

FYI, here is the compatibility table of Full Screen API caniuse.com/#feat=fullscreen