iframeコンテンツを再生せずに予約する方法

Question

私はさまざまな種類のコンテンツのショーケースであるWebページを作成しています。コンテンツの一部には、コンテンツを再生するHTMLページ（Flash、WebGL）が付属しており、iframeを使用してWebページにロードしようとしています。私は実際のコンテンツを持っているので私のページにコンテンツをまっすぐ追加することができますが、編集者はすぐに使えるHTMLを生成して素晴らしい作品にします。したがって、すべての種類のコンテンツを適切に再生するために、ページに追加する重要な部分を解剖したいとは思わないでしょう。

まだ、これはうまくいきます。問題は、コンテンツをすぐに再生したくないということです。必要なスペース（iframeは読み込むコンテンツのサイズと一致する必要があります）を予約したいと考えています。私はこれらを別々に行う方法を知っていますが、一緒には行いません。コンセプトは、コンテンツを再生するボタンがあり、ページのサイズを変更せずにコンテンツがそのスペースで再生されるということです。

私はこれを達成するための2つの方法を見ていますが、どちらの方法もわかりません。

1. 再生ボタンを押す前にコンテンツを読み込まずに、何らかの形でコンテンツのサイズを読み込みます。

2. 再生ボタンを押す前にコンテンツを読み込んで、起動/再生を禁止します。

私はスペースを確保しました visibility: hiddenスタイリングを使用することによって得て、その上のiframeのコンテンツを非表示にし（そのが隠されたりしない場合は私には関係ありません）が、コンテンツを再生し始めて所望の効果に最も近い

。別の方法は、HTMLファイルから幅と高さの値を読み取ることですが、この情報は別のCSSファイル内にあるか、ファイル内にいくつかの幅と高さの値が存在する可能性があります。私がiframeにロードするあらゆる種類のコンテンツの例外を作成し始める必要がある場合、それは混乱になります。

これらのアプローチのいずれかを達成する簡単な方法はありますか？それとも代替アプローチがありますか？

Answer 1

iframeが必要な正しい位置にページをロードし、src属性に空白のページを設定できます。

次に、ビューにスクロールしたら、正しいsrc属性をロードします。

これは、javascriptのように（これは簡単にjQueryを使用しますが、必要ではありません）

これは大まかな例であり、いくつかのリファクタリングが必要になります https://jsfiddle.net/pLwL0843/2/