1. ホーム
  2. 質問と答え
  3. iframeエクステントの外側にiframeコンテンツがオーバーフローするようにする

iframeエクステントの外側にiframeコンテンツがオーバーフローするようにする

2013-07-02 10 views
10

私はiframeを含むウェブページを持っています。その中にはiframeが埋め込まれたYoutubeビデオです。私はこのビデオを再生すると、サイズを拡大（拡大）させます。動画が拡大するにつれて、iframeの幅が十分でないため、すべての動画が表示されるわけではありません。iframeエクステントの外側にiframeコンテンツがオーバーフローするようにする

iframeを「コンテンツのオーバーフロー」にすることは可能ですか？つまり、ビデオをiframeの幅の外側に表示させることができますか（達成しようとしているものの明確な例については、

これは、Webページが現在どのように見えるかです： enter image description here

注私はちょうどカントはIFRAME広います enter image description here

これは、それが完全に成長してきたとき、私はビデオを見てしたいと思います方法です。 CSSのoverflow: visibleをiframe（とそのすべての子要素）に渡そうとしましたが、何も変更されません。

これは、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からビデオ（iframe）を削除してメインのWebページに配置するためにJavascriptを使用することができますが、これは非常に悪いウェブサイトのデザインと思われますか？

出典

2013-07-02 Jake M

+0

新しいウィンドウを使用してビデオを追加し、最大化します。別のコンテナなしでフレームからコンテンツをオーバーフローさせることはできません。 – CME64

+0

@ CME64コメントありがとうございます。新しいウィンドウが表示されたら、新しいポップアップウィンドウ、新しいドキュメント、divを作成してそれを親ドキュメントの最後に追加することを意味しますか？ –

+0

window.open（）..参照してくださいhttp://www.w3schools.com/jsref/met_win_open.asp – CME64

答えて

3

[更新や編集]

IEのために正常に動作しますwindow.open（window.open('iframe.html','','fullscreen=1,channelmode=1');のようにが、私はそれは内容に私としてをリロードしないようにIE のための適切な方法を見つけたいです他人） のためにやったが、私はあなたのiframeのようにする必要があり

、あなたに彼らはシアターモードをサポートしていないので、クロム、SafariとFFで動作し、より良い方法を見つけた：

<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の互換機能が道を進んでいる）コードに追加..

EDIT：多分あなたは、問題のFRをご覧ください窓やフルスクリーンを使用したくない場合は別の角度にしてください。

ソリューションはあなたがAJAXや他の方法を使用することができます（アクセスを制限し、CSS overflow:hiddenを持っているのdivに置き換えると、これはあなたのiframeのページの内容をDIV移入されたiframeのを捨てることになります内容を読み込みます）。あなたはiframeのようなものを持っていますが、それは同じ文書の要素です。

1コンテナのCSSをoverflow:hiddenとvisibleまたはの間で切り替えることができます。

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

注：あなたがあなた自身を構築するか、単に絶対コンテンツのポジショニングとjQueryのUIのスライダーの値を持つ内容のごトップ CSSをリンクすることができ、スクロールバーを失うことを恐れてはいけないと、あなたはに優れています行く。

出典

2013-07-02 06:33:44 CME64

+0

このコードはありがとうございます。しかし、ビデオの「div」を外側の文書に追加するだけでは簡単ではありませんか？ css（ "top"、 "150px"）; '。（"＃myVideo "）。これは私の代替手段でしたが、iframeからdivを削除して他のWebページに挿入するなど、ウェブサイト開発の習慣が良くないと心配しています。 –

+0

はい、フルスクリーンもウィンドウも使用していない場合はこれが唯一の方法ですが、私は考えましたが、それを含む別のドキュメントであるため、iframe内から要素を選択する方法を考えました。私はその理論をテストしなかったが、ここでそれについて私に全面的に伝えている。 – CME64

+0

編集部分を確認してください、別の提案があります – CME64

7

ありませんが、それは...

iframeから文書が完全に別の文書であり、およびブラウザのセキュリティは、あなたがこれを行うにはさせません...

編集ことはできません。 fullscreenプロパティをコンテナの背景色を透明にして埋め込みビデオを配置することができます。

フルスクリーンコードは、this answerで説明されています。

出典

2013-07-02 08:27:16

+0

可能ですが、私のコードを確認してから、私は確信しました1時間前は不可能でした！ – CME64

+0

@ CME64基本的にはOPが尋ねたものではなく、 'fullscreen'プロパティを使います。 –

+0

まあ、そうだけど、フルスクリーンのソリューションは彼が考慮する必要があります。さもなければ、それは新しいウィンドウです。彼は私の最初の提案だったので、確かにそれを望んでいません。ビデオがフレームより小さいという問題があった場合は、ビデオコンテナのサイズのサイズ変更を検討する必要があります。 – CME64

1

ここでは示唆しない別の方法は、2つのiframeを使用することです。第2のものは最初のものの上を浮動し、ビデオを含む。あなたはwindow.postMessageとウィンドウ間で通信することができます。しかしiframeとトップページをコントロールできれば、ビデオをトップページのdivに入れることができます。どちらのページも、window.postMessageと通信できます。

出典

2015-11-10 21:10:43 gertas

関連する問題

 関連する問題