14

を含む Web ページがありますiframe。その中にiframeは、埋め込まれた Youtube ビデオがあります。このビデオを再生すると、サイズが大きくなります。ビデオが大きくなると、iframe の幅が十分でないため、すべてのビデオが表示されるわけではありません。

iframe を「コンテンツのオーバーフロー」にすることは可能ですか。つまり、ビデオを iframe 幅の外に表示することはできますか (私が達成しようとしていることの明確な例については、以下のスクリーン キャプチャを参照してください)。

これは、現在の Web ページの外観です。 ここに画像の説明を入力

これは、ビデオが完全に成長したときにビデオをどのように見せたいかです。 ここに画像の説明を入力

iframeを広くすることはできないことに注意してください。iframe (およびそのすべての子要素) に CSS を指定しようとしましたoverflow: visibleが、何も変わりません。

これは、Web ページがどのように配置されているかの簡単な例です。

....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 から削除し、メインの Web ページに配置することもできますが、これは非常に悪い Web サイトのデザインになると思いませんか?

4

3 に答える 3

3

[更新および編集]

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>

最大化または最小化/閉じたときにクラス（addClassおよびremoveClass）を使用して、コンテナの高さと幅を修正するためにcssを指定できます（コードにスタイルが追加されます）

IE互換機能は準備中です..

編集：ウィンドウやフルスクリーンを使用したくない場合は、問題を別の角度から見る必要があるかもしれません。

解決策は、アクセシビリティを制限している iframe を破棄し、それを css を持つdiv に置き換えてから、overflow:hiddenこの div に iframe ページのコンテンツを入力することです (コンテンツをロードするには、ajax またはその他の方法を使用できます)。多田、iframeのようなものがありますが、それは同じドキュメントの要素です。次に、次の 2 つの方法でオーバーフローを制御できます。

overflow:hidden1- コンテナの css をとvisibleまたはの間で切り替えますauto。

2- 要素をコンテナ div の外に再配置し、絶対配置を使用して他の要素の上に表示します。

注：スクロールバーを失うことを恐れないでください。独自に作成するか、コンテンツのトップcssをjquery uiスライダーの値と絶対コンテンツの位置にリンクするだけで、準備完了です。

于 2013-07-02T06:33:44.013 に答える