1

Zurb Foundations の公開モーダル内に表示される複数の YouTube iframe を含むサイトを作成しています。サイトの完成版には約 30 本の動画が含まれるため、負荷が高くなり、ページの速度が低下します。これに対抗するために、lazyYT.js を使用してビデオを遅延ロードすることを計画していました。最初のロードではすべてうまく機能しますが、モーダルを開いて再生を終了し、モーダルを閉じると、ビデオが再起動してバックグラウンドで再生されます。

遅延読み込みで複数のバリエーションを試しましたが、成功しませんでした。問題は、明らかに iframe を正しく終了しないこと、または遅延ロードが正しくトリガーされないことにあると思います。

フィドル http://jsfiddle.net/j43aepqh/6/

HTML:

<!-- Triggers the modals -->
<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>


<div id="videoModal" class="reveal-modal large" data-reveal="">
  <h2>This modal has video</h2>
  <div class="flex-video widescreen vimeo" style="display: block;">
    <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
  </div>

  <a class="close-reveal-modal">&#215;</a>
</div>
<!-- Reveal Modals end -->


<script>$(document).foundation();</script>
<script>$('.js-lazyYT').lazyYT();</script>

何が起こっているのか、問題を解決する方法を理解できないので、これは私を怒らせています。

これは、サイトに動画を投稿する正しい有効な方法ですか? モーダルと YouTube の iframe 埋め込みを使用して、ページ速度に深刻な問題を引き起こすことなく、1 つのページに複数の動画を投稿する他の方法を受け入れます。

iframe の読み込みを遅らせるための適切なスクリプトや、iframe を 1 つずつ読み込む方法はありますか?

ヘルプや提案をいただければ幸いです。

ps初めてstackoverflowを使用します。正しく実行していることを願っています

4

3 に答える 3

0

私は同じ問題を経験しました。ここにある別のスクリプトを使用して、遅延読み込みを機能させることができました: http://www.labnol.org/internet/light-youtube-embeds/27941/

それがあなたのために働くかどうか教えてください！

ブレント

于 2014-11-13T03:50:25.243 に答える
0

私はちょうど似たような状況に対処してきました。ホームページには 30 本ほどの動画のサムネイルがあり、クリックするとモーダル ウィンドウが開き、iframe 動画が表示されます。

以前は、ページの読み込み時にすべてのモーダル ウィンドウが iframe を使用して読み込まれていたため、ページの読み込み時間が長くなりました。私も js-lazyYT を試しましたが、モーダル クロージャー後に動画を再生する際に問題が発生しました。私はこれを次の方法で処理しました。

HTML

<!-- Image link to modal -->
<div class="small-12 medium-4 medium-pull-8 columns">
    <a class="youtube-modal-reveal" data-reveal-id="{{ videoWorkshop.vID }}">
        <img src="http://img.youtube.com/vi/{{ videoWorkshop.vID }}/sddefault.jpg">
    </a>
</div>

<!-- Modal -->
<div id="{{ videoWorkshop.vID }}" class="reveal-modal large" data-reveal="">
    <div class="flex-video">
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

JS

(function() {
    $(".youtube-modal-reveal").each(function( index, element ) {
        // Use the one function as we only need to load the video once, even if they visit the modal multiple times
        $(element).one( "click", function() { 
            var id = $(this).attr("data-reveal-id");
            var flexVideoContainer = $("#"+id).children(".flex-video");
            $(flexVideoContainer).html("<iframe src='//www.youtube.com/embed/" + id + "?rel=0' frameborder='0' allowfullscreen></iframe>");
        });
    });
})();
于 2015-04-27T16:15:46.430 に答える