YouTubeがJavaScriptを使用してより高速に埋め込まれています

JavaScriptを使用してYouTube埋め込みをスピードアップ：包括的なガイド

キーハイライト：

JavaScriptを使用して標準のYouTube埋め込みを軽量のサムネイルプレビューに置き換えることにより、
• 初期ページの読み込み時間を劇的に削減します。
HTML5データ属性を使用してカスタマイズされたYouTubeビデオ埋め込みでユーザーエクスペリエンスとページの美学を強化し、自動再生、ブランディング、およびコントロールを制御します。 さまざまな画面解像度のために、さまざまなYouTubeサムネイル品質オプションを活用することにより、負荷速度を犠牲にすることなく視覚的魅力を最適化します。 このソリューションを効率的に実装します。純粋なJavaScript（無駄のない、依存関係のないアプローチ用）またはjQuery（よりシンプルなコーディングとより広いブラウザの互換性のため）。
ウェブサイトの速度が最重要です。 リクエストを最小限に抑えた軽量コンテンツは、ユーザーエクスペリエンスが肯定的であるために重要です。 ただし、動画はコンテンツの魅力に不可欠であり、多くの場合、YouTubeのようなサードパーティのプロバイダーから調達されています。 挑戦？ ビデオはページの読み込み時間を大幅に増やします。 1つの埋め込みビデオは、視聴者が積極的に見ていなくても、複数のHTTPリクエストを生成し、かなりの帯域幅を消費できます。 この記事では、Amit Agarwalの2013年のアプローチに触発されたが、最新のテクニックで強化されたこの問題を軽減するソリューションを紹介しています。 YouTubeビデオの初期負荷サイズを大幅に削減します。
• 解決策：

コアのアイデアは、完全なビデオプレーヤーの代わりにサムネイルプレビューを最初に表示することです。 JavaScriptは、ユーザーがクリックして再生されたときにのみ、サムネイルを実際のプレーヤーに動的に置き換えます。 これにより、初期ページのロードサイズが大幅に削減されます。 より小さな画像であるサムネイルは、すぐにロードされます。

拡張機能：

この改良されたバージョンは、バニラJavaScriptとjQueryの実装の両方を活用しています。 また、HTML5データ属性を介してYouTubeビデオパラメーターをカスタマイズする機能も紹介します。 これにより、次のようなプレイヤー設定に対する細かい制御が提供されます

：（ 0または1）プレーヤーコントロールを非表示または表示

：（0または1）YouTubeロゴを削除します

：（0または1）再生後に関連するビデオの提案を無効にします。

：（0または1）ビデオタイトルとアップローダー情報を非表示にします。

• ：（秒）特定の時間で再生を開始します。controls
• ：（たとえば、HD720）ビデオ品質を設定します（利用可能な場合）。modestbranding
• ビデオが再生されると、rel（すぐに再生を開始する）や
（非アクティブなときにコントロールを非表示にするため）のようなパラメーターが自動的に追加されます。
• showinfoYouTubeサムネイルオプション：

• YouTubeは、次のようなURLを介してアクセスできるいくつかのサムネイルサイズを提供します（または、より短い代替品としてhttps://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id>を使用）。 オプションは次のとおりです i.ytimg.com

  （120x90）
  • default.jpg
  （480x360）
  • hqdefault.jpg
  （320x180）
  • mqdefault.jpg
  （640x480）
  • sddefault.jpg
  （1280x720）
  • maxresdefault.jpg
  実装：
  html：

  HTMLは、YouTubeビデオID、寸法、および（オプションで）カスタムパラメーターを設定します。

  css：

  <div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>
  <div class="youtube" id="lR4tJr7sMPM" data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" style="width: 640px; height: 360px;"></div>

  CSSはサムネイルをスタイルし、それを中心にし、再生アイコンを追加します（効率のためにデータURIを使用して）：

  （JavaScriptとjQueryの実装は簡潔に省略されていますが、元の記事で入手できます。）

  .youtube { /* ... CSS styles ... */ }
  .youtube .play { /* ... CSS styles ... */ }

  結果と結論： このソリューションを実装すると、ページの読み込み時間が大幅に改善されます。 実際のテストでは、HTTPリクエストとページサイズが大幅に削減され、負荷時間が速くなります。 このコードは、実験と改善のためにCodePenで利用できます。 このシンプルなコードの変更は、パフォーマンスの大幅な向上を提供するため、組み込みYouTubeビデオを使用して、あらゆるWebサイトに貴重な追加を提供します。

以上がYouTubeがJavaScriptを使用してより高速に埋め込まれていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。