Сделать переполнение содержимого iframes вне пределов iframe

У меня есть веб-страница, содержащая iframe. Внутри iframe находится встроенное видео Youtube. Когда я воспроизвожу это видео, я делаю его масштабируемым (растущим) размером. По мере того как видео растет, не все видео видно, потому что iframe недостаточно широк.

Можно ли сделать iframe "Overflow its content", т.е. сделать видео видимым вне ширины iframe (см. ниже снимки экрана, чтобы ясный пример того, чего я пытаюсь достичь).

Вот как выглядит веб-страница:

Вот как я хотел бы, чтобы видео выглядело, когда оно полностью выросло:

Примечание. Я просто не могу сделать iframe более широким. Я попытался предоставить iframe (и все его дочерние элементы) CSS overflow: visible, но он ничего не меняет.

Это простой пример того, как организована веб-страница:

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

           <!-- Inside this iframe/webpage are the embedded Youtube videos.
                Each video is an iframe itself (that sits inside a div). -->

        </iframe>
     </div>
  </div>
</body>

Знаете ли вы способ использования CSS или HTML, чтобы показывать видео вне пределов iframe? Я мог бы использовать Javascript для удаления видео (iframe) из iframe и поместить его в основной веб-страница, но это будет очень плохой дизайн сайта, как вы думаете?

Ответ 1

Нет, это невозможно...

Документ из iframe является полностью другим документом, и безопасность браузера не позволит вам сделать это...

Изменить. Вы можете использовать свойство fullscreen, используя прозрачный цвет фона для контейнера и разместив там встроенное видео.

Полноэкранный код был описан в этом ответе.

Ответ 2

[обновлено и изменено]

window.open отлично работает для IE (как в window.open('iframe.html','','fullscreen=1,channelmode=1');, но я хочу найти правильный способ для IE , чтобы он не перезагружал содержимое, как это было для других) но я нашел вас лучшим способом, который работает на хроме, сафари и FF, так как они не поддерживают режим театра,

ваш iframe должен выглядеть следующим образом:

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

это страница содержимого вашего 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>

вы можете предоставить это css для корректировки высоты и ширины контейнеров, используя классы (addClass и removeClass) при максимальном или минимизированном/закрытом (стиль добавлен в код)

Функция совместимости IE находится на пути.

РЕДАКТИРОВАТЬ:, возможно, вам стоит взглянуть на проблему под другим углом, если вы не хотите использовать окна или полноэкранный режим.

решение будет отбрасывать iframe, который ограничивает доступность и заменяет его div, который имеет css overflow:hidden, а затем заполняет этот div содержимым вашей страницы iframe (вы можете использовать ajax или любой другой метод для загрузки содержимого). tada, у вас есть что-то вроде iframe, но это элемент одного и того же документа. то вы можете управлять переполнением двумя способами:

1- переключить контейнер css между overflow:hidden и visible или auto.

2- переместите элемент вне контейнера div и используйте абсолютное позиционирование, чтобы показать его по другим элементам.

Примечание: не бойтесь потерять полосу прокрутки, вы можете создать свой собственный или просто связать свой верхний css содержимого с значком слайдера jquery ui с абсолютным позиционированием содержимого, и вам хорошо идти.

Ответ 3

Другой способ, не предлагаемый здесь, - использовать два iframes. Второй будет плавать над первым и будет содержать видео. Вы можете общаться между окнами window.postMessage. Но если у вас есть контроль над iframe и верхней страницей, вы можете поместить видео в div на верхнюю страницу. Тем не менее обе страницы могут связываться с window.postMessage.