LiteYouTube埋め込み-ウェブサイトにYouTube動画を埋め込むためのより良い方法

公開: 2022-02-26

YouTubeビデオを埋め込むのは簡単ですが、1つのYouTubeビデオを埋め込むとWebページにどれだけの重みが追加されるかを知って驚かれることでしょう。 YouTubeビデオプレーヤーのみをレンダリングするには、ブラウザは最大800 kBのデータ（スクリーンショットを参照）をダウンロードする必要があります。 そして、これらのファイルは、訪問者が再生ボタンをクリックする前でもダウンロードされます。

Embed YouTube Video Player Size

埋め込まれたYouTubeビデオは、Webページのバイトサイズを大きくするだけでなく、ブラウザーはビデオプレーヤーをレンダリングするために複数のHTTP要求を行う必要があります。 これにより、ページの全体的な読み込み時間が長くなり、ページの速度とWebサイトのコアバイタルスコアに影響します。

デフォルトのYouTube埋め込みコードのもう1つの欠点は、固定サイズのビデオプレーヤーをレンダリングし、応答しないことです。 人々が携帯電話であなたのウェブサイトを見る場合、ビデオプレーヤーは小さな画面に対して適切にサイズ変更されないかもしれません。

ページサイズを大きくせずにYouTube動画を埋め込む

現在は機能していないGoogle+は、YouTube動画を埋め込むために非常に巧妙な手法を採用しています。 ページが最初に読み込まれたとき、Google +はYouTube動画のサムネイル画像のみを埋め込み、実際の動画プレーヤーは、ユーザーがサムネイル内をクリックしたときにのみ読み込まれました。

YouTubeビデオのサムネイルフレーム画像のサイズは約15kBであるため、Webページのサイズを約MB削減できます。

LiteYouTube埋め込みデモ

このデモページを開いて、実際のGoogle+テクニックをご覧ください。 最初のビデオはデフォルトのIFRAMEコードを使用して埋め込まれ、2番目のビデオはオンデマンドでのみYouTubeビデオをロードするライトモードを使用します。

ユーザーが再生ボタンをクリックすると、サムネイル画像が自動再生が1に設定された標準のYouTube動画プレーヤーに置き換えられるため、動画はほぼ瞬時に再生されます。 大きな利点は、追加のYouTube JavaScriptが読み込まれるのは、誰かが埋め込まれた動画を視聴することを決定した場合のみであり、それ以外の場合は読み込まれないことです。

軽くてレスポンシブなYouTube埋め込み

YouTubeの標準の埋め込みコードは、ビデオプレーヤーの幅と高さが固定されているIFRAMEタグを使用しているため、プレーヤーが応答しなくなります。

YouTubeの新しいオンデマンド埋め込みコードはレスポンシブで、訪問者の画面サイズに基づいてプレーヤーのサイズを自動的に調整します。

YouTube Embed Code

応答性の高いYouTube動画の埋め込み-チュートリアル

ステップ1： YouTubeビデオを表示するWebページの任意の場所に次のHTMLスニペットをコピーして貼り付けます。 VIDEO_IDをYouTube動画の実際のIDに置き換えることを忘れないでください。

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

高さが自動計算されている間、ビデオプレーヤーは自動的に親の幅を占めるため、高さと幅は割り当てません。 同じページに複数のYouTube動画を埋め込む必要がある場合は、動画IDが異なる複数のDIVブロックを貼り付けることもできます。

ステップ2： JavaScriptをコピーしてWebテンプレートの任意の場所に貼り付けます。 スクリプトは、Webページに埋め込まれているすべてのビデオを検索し、DIV要素をビデオのサムネイルと再生ボタンに置​​き換えます（デモを参照）。

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

ステップ3： Webテンプレートの終了ヘッドタグの前にCSSをコピーして貼り付けます。

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

このCodepenページで、実際のYouTube埋め込みテクニックを確認できます。

iPhoneおよびAndroidのChromeおよびSafariブラウザーは、ユーザーの操作によって開始された場合にのみHTML5ビデオの再生を許可することに注意してください。 埋め込まれたメディアの自動再生をブロックして、セルラーネットワークを介した一方的なダウンロードを防ぎます。

YouTube埋め込みチュートリアル

  1. サウンドをミュートしたYouTubeビデオを埋め込む
  2. Webページの背景としてYouTubeビデオを配置する
  3. YouTubeビデオの一部を埋め込む