iframeでファンシーボックスを埋め込む方法

ファンシーボックス（http://fancybox.net）をセットアップしました。ボックスサイズはWebbroserのサイズに自動的にサイズ変更されます。iframeでファンシーボックスを埋め込む方法

これで、ボックス内にiframeを入れて、ボックスのサイズを変更したいと考えています。

私はレスポンシブなiframeを検索しましたが、例ではブラウザウィンドウに関してレスポンスiframeが表示されています。

iframeは、iframeが自分自身をボックスに合わせることを可能にする解決策です。

This is a simple link that is fired with jquery: 
<body> 
<a class="Link" file="game" srrc="video/voytox/index.html" 
caption="Caption" ></a> 

and it opens an iframe within the fancybox 

<iframe id ="Player" ></iframe> 
</body> 

this is the jquery: 
$('.Link').click(function(){ 
     var File = $(this).attr('file'); 
     var srrc = $(this).attr('srrc'); 
     //var videoWidth = Number($(this).attr('videowidth')); I can 
     optionally set fixed height and width, but i don't want to do that. 
     //var videoHeight = Number($(this).attr('videoheight')); 



     $('#Player').attr("src", srrc); //this refers to the iframe

これは、ファンシーボックスを起動します。私はiframeがfancyboxをどのように満たしているかを調べることをテスト目的のために固定幅と高さに設定しました。残念ながら100％で、ファンシーボックスを超えて含まれていません。私はそれがボックスのサイズに "従属" したいです。

 $.fancybox({ 
      'autoDimensions' : false, 
      'scrolling'   : 'no', 
      'width'    : '800', 
      'height'   : '800', 
      'hideOnOverlayClick' : false, 
      'transitionIn' :'fade', 
      'transitionOut' :'fade', 
      'overlayColor' : '#666', 
      'overlayOpacity': .9, 
      'href' : '#videoPlayer' 

      });

出典

2017-05-15 Voytek

コードを投稿して、もう何を試してみることができますか？私は、iframeの幅と高さを100％に設定していると思われますか？ –

100％は箱のサイズを超えてしまいます。箱に入れておきたいです。 – Voytek

あなたfancyboxにiframeを追加する必要があります - あなたが100％の幅を割り当てるときに、その親要素に対する相対なり、そのように。現在、彼らは兄弟です。

出典

2017-05-15 16:32:53

それは問題ではないようですが、私もhtml（）を行い、幅100％と高さ= "100％"のiframeを渡しました。ボックスの全幅には幅のみが適用され、高さは全くありませんでした。しかし、50、80などの異なる値を高さにハードコードしたとき、高さが変わってしまった。したがって、私はまだ、空想の箱をiframeで満たす方法を知らない。 – Voytek

私がする必要があるのは、iframeの高さをボックスの高さに設定することです。それを達成する方法？ – Voytek

iframeでファンシーボックスを埋め込む方法

答えて

関連する問題