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
[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.
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
.
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.