WordPressに動画を追加してサイトを遅くしない方法 

コンバージョン率の高いランディングページを作成する際、まず考えるのは動画の埋め込みです。信頼を築く最も速い方法ですが、それはユーザーにとってシームレスに再生される場合に限ります。

ほとんどのチュートリアルでは、URLを貼り付けて完了する方法が紹介されています。しかし、動画がページの速度を低下させる理由と、代わりに何をすべきかについては触れられていません。

手順を理解すれば、WordPressに動画を埋め込むのに2分もかかりません。このガイドでは、私が使用するすべての方法と、完了後にページを高速に保つ方法について説明します。

WordPressサイトに動画を追加する理由

動画マーケターの82%が、コンテンツに動画を追加した後、ウェブトラフィックが増加したと報告しています。これは、WordPressサイトで動画の使用を開始する大きな理由です。

高品質な動画を追加すると、WordPress SEOが向上し、見つけてもらいやすくなります。

動画をWordPressに直接アップロードすべきですか？

動画をWordPressに直接アップロードするよりも、YouTubeやVimeoのようなプラットフォームから動画を埋め込む方が良いです。

メディアライブラリに動画をアップロードすることは可能ですが、お勧めしません。SeedProdでは、常に代わりに動画を埋め込んでおり、その理由は次のとおりです。

• 大きなファイルサイズ：動画は多くのストレージを消費し、サイトを遅くする可能性があり、ユーザーエクスペリエンスとSEOに悪影響を与えます。
• 高い帯域幅の使用：動画ストリーミングは、かなりのサーバーリソースを使用します。ホスティングプランに制限がある場合、すぐに上限に達し、追加費用が発生する可能性があります。
• 追加のトラフィック機会：YouTubeやVimeoのようなプラットフォームにアップロードすると、それらのオーディエンスにリーチし、より多くの訪問者をサイトに誘導できます。

動画を埋め込むか、WordPress動画プラグインを使用することは、サイトを高速でアクセス可能に保ちながらリーチを拡大するための最も効率的な方法です。

埋め込む前に動画をどこにホストするか

動画を埋め込む前に、どこかに存在する必要があります。ここでは、最も一般的な3つのオプションを紹介します。

プラットフォーム	費用	最適	トレードオフ
YouTube	無料	発見、一般公開コンテンツ	最後に、関連動画を表示します。無料プランではブランド表示を削除できません
Vimeo	無料プラン。有料プランは月額$20から	販売ページ、プロフェッショナルな動画	競合他社の動画はありません。ビジネス機能には有料プランが必要です
CDNを使用したセルフホスト	変動（ホスティング+CDN費用）	制限付きまたはプレミアム動画コンテンツ	完全な制御が可能ですが、コストが高く、セットアップに手間がかかります

ほとんどのサイトでは、YouTubeが最適です。無料、高速で、発見性に優れています。セールスページに動画を使用する場合や、最後に競合他社の広告を表示したくない場合は、Vimeoの有料プランが価値があります。

WordPressに動画を埋め込む方法：4つの方法

WordPressに動画を埋め込む方法はいくつかあります。ここでは、最もよく使用する方法を、最も簡単な貼り付けから、標準外のプラットフォーム用のiFrameメソッドまで紹介します。

方法1：WordPressの投稿やページに動画を埋め込む（ブロックエディターの方法）

WordPressブロックエディター（Gutenberg）は、WordPressの投稿やページに動画を簡単に埋め込む方法を提供します。

まず、埋め込みたい動画のURLが必要です。YouTubeのようなプラットフォームを使用している場合は、動画に移動してアドレスバーからURLをコピーします。共有アイコンをクリックして、そこから動画のURLをコピーすることもできます。

次に、動画を追加したい投稿またはページに移動し、「編集」をクリックしてWordPressブロックエディターを開きます。

WordPressブロックエディター内のどこかをクリックして、以前にコピーしたURLを貼り付けます。動画のURLを貼り付けると、WordPressは自動的に埋め込みコードを取得し、コンテンツエディター内に動画を表示します。

次に、ポップアップツールバーのオプションをクリックして動画をカスタマイズできます。たとえば、動画の幅、配置、キャプション、アスペクト比などを変更できます。

WordPressは、ホワイトリストに登録されたプラットフォームのみを自動埋め込みできます。それには以下が含まれます：

• Amazon
• Dailymotion
• Facebook
• Imgur
• Instagram
• Reddit
• SoundCloud
• Spotify
• Twitter
• Vimeo
• YouTube
• その他多数。

ホワイトリストにないウェブサイトから動画を埋め込みたい場合は、動画の完全なHTMLコードをコピーして貼り付ける必要があります。これを行うには、カスタムHTMLという新しいブロックを追加して、動画コードを貼り付けます。

最後のタスクは、投稿またはページを保存して公開し、動画をライブにすることです。

クラシックエディターをまだ使用している場合は、動画のURLをコピーしてWordPressエディターに直接貼り付けることができます。以前と同様に、動画は自動的に読み込まれます。

方法2：SeedProdを使用してWordPressサイトのどこにでも動画を追加する

WordPressで動画を埋め込むための、よりカスタマイズされたアプローチを探しているなら、SeedProdはシンプルでありながら強力なソリューションを提供します。

SeedProdは、ドラッグ＆ドロップのウェブサイトビルダーで、コードに触れることなく、ランディングページ、テーマテンプレート、サイドバーなど、サイトのあらゆる部分に動画を追加できます。

まず、SeedProdプラグインをインストールして有効化する必要があります。

これに関するヘルプについては、SeedProdのインストールに関するドキュメントを参照してください。プラグインとライセンスキーのダウンロード、インストール、アクティブ化方法について説明しています。

これで、SeedProdのドラッグ＆ドロップビルダーを使用して、ウェブサイトに動画を追加できます。

WordPressランディングページに動画を追加する

SeedProdを使用すると、ランディングページに動画を追加するのは簡単です。WordPressダッシュボードからSeedProd » Landing Page Builderに移動し、新しいランディングページを作成するか、既存のWordPressページを編集します。

ページビルダーに入ったら、埋め込み動画コンテンツには2つのオプションがあります。標準の動画ブロックまたは高度な動画ポップアップブロックを使用できます。

動画ブロックの追加

動画ブロックを使用するには、左側のサイドバーで検索し、ランディングページのレイアウトにドラッグ＆ドロップします。

ブロック設定では、YouTubeとカスタムの2つの動画ソースから選択できます。

YouTubeソースを使用すると、YouTubeの動画リンクを貼り付けるだけで、動画コードが自動的に埋め込まれます。その後、数回クリックするだけで、動画の幅、配置、デスクトップまたはモバイルデバイスでの表示をカスタマイズできます。

カスタムオプションを選択すると、YouTubeなしでWordPressに動画を埋め込むことができます。これを行うには、動画埋め込みコードをコピーしてカスタム動画コードボックスに貼り付ける必要があります。

動画ポップアップブロックの追加

SeedProdの動画ポップアップブロックは、標準ブロックよりもはるかに多くのカスタマイズオプションを提供します。高度なブロックサイドバーで見つけて、ページにドラッグアンドドロップします。

ブロック設定には、いくつかの動画ソースオプションがあります。

動画リンクを貼り付けることで、YouTubeまたはVimeoから動画コンテンツを自動的に埋め込むことができます。

または、カスタムオプションを使用すると、コンピューターから動画をアップロードしたり、外部ウェブサイトから動画リンクを貼り付けたりできます。

動画ソースを選択した後、次の機能を含むさまざまな機能を有効にすることで、動画プレーヤーをカスタマイズできます。

• 控えめなブランディング：動画プレーヤーからYouTubeのブランディングを非表示にします。
• プライバシーモード：動画を再生しない限り、YouTubeまたはVimeoが訪問者情報を保存しないようにします。
• 遅延読み込み：ページ読み込み後に動画を読み込むことで、ページの読み込み時間を改善します。

さらに、固定動画機能を有効にすると、ユーザーがそのページにアクセスしたときに、スクロールしても動画が画面の下部に固定されます。

訪問者がスクロールしても、重要なメッセージに注意を向けさせ続けます。

最後に、動画ポップアップブロックには動画オーバーレイオプションがあり、カスタム動画サムネイル画像と再生アイコンをアップロードできます。

ライトボックスオプションを有効にすると、ユーザーがクリックしたときに動画がライトボックスポップアップで開きます。

ランディングページでは、カスタムサムネイルとライトボックスオプションを使用して、動画ポップアップを使用します。訪問者は、視聴を選択するまでクリーンな画像を見ます。準備ができたら、自動再生やページ速度の低下なしに、動画が全画面で開きます。これが、私が自身のSeedProdランディングページで使用している設定です。

完全なカスタマイズガイドについては、WordPressで動画ランディングページを作成する方法のチュートリアルをご覧ください。

動画とランディングページのカスタマイズが完了したら、保存および公開ボタンをクリックして変更をライブにします。

SeedProdでWordPressに追加した後の最終的な動画の例を次に示します。

WordPressテーマへの動画の埋め込み

WordPressテーマの作成方法のガイドに従って学習できます。

WordPressテーマのさまざまな部分に動画を追加する手順は、ランディングページオプションの手順と同様です。SeedProd » Theme Builderにアクセスし、テーマテンプレートを編集するだけです。

例えば、サイドバーテンプレートを開き、ビデオブロックのいずれかをドラッグしてWordPressのサイドバーにビデオを埋め込むことができます。

変更を保存すると、次のようになります。

または、フッターを編集して、フッターウィジェットに新しいビデオコンテンツを追加することもできます。

本当に簡単で、コーディングをゼロから行う必要も、開発者を雇う必要もありません。

方法3：WordPress動画プラグインを使用して動画を埋め込み、カスタマイズする

WordPressブロックエディターやSeedProdでは満たせない、より高度な機能を探している場合や特定のニーズがある場合は、ビデオ埋め込みを専門とするWordPressプラグインが最善の解決策となる可能性があります。

この目的のために、WordPress用の最高のYouTube動画ギャラリープラグインであるSmash BalloonのYouTube Feed Proプラグインをお勧めします。これにより、カスタマイズ可能なギャラリーにYouTubeチャンネルの動画を埋め込むことができます。

このプラグインは、新しいビデオを自動的にインポートしたり、ビデオフィードを組み合わせたり、ライブストリーミング機能を追加したり、YouTubeプレイリストを埋め込んだりできます。YouTubeの埋め込みには、いいねや共有ボタン、コメント、リアクションも含まれており、ビデオウィジェット内でソーシャルプルーフを高めます。

詳細については、WordPressにYouTube動画を埋め込む方法に関するこのガイドを参照してください。

方法4：iFrameコードを使用して埋め込む（ホワイトリストに登録されていないサイトの場合）

上記の3つの方法は、90％のケースに対応します。WordPressが自動検出しないサイトから埋め込む必要がある場合、またはYouTubeの関連動画の提案を制御したい場合は、代わりにiFrameコードが必要になります。

手順は以下の通りです。

1. YouTubeで動画に移動し、共有、次に埋め込みをクリックして、iFrameコードをコピーします。
2. WordPressブロックエディターで、カスタムHTMLブロックを追加します。
3. iFrameコードをブロックに貼り付けます。
4. ページを保存して公開します。

プラットフォームがWordPressのoEmbedホワイトリストにない場合や、カスタムパラメータが必要な場合にこの方法を使用します。たとえば、YouTubeのURLにrel=0を追加すると、終了時の関連動画の候補が減ります。

注意点として、手動のiFrameはモバイルで自動的にレスポンシブになりません。これを修正するには、iFrameをCSSコンテナで囲みます。これをテーマのカスタムCSSまたは埋め込みの上にあるHTMLブロックに貼り付けます：

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

次に、iFrameを次のように囲みます：<div class="video-container">[iFrameコードをここに挿入]</div>。padding-bottomの値が56.25%であるため、あらゆる画面サイズで16:9のアスペクト比が得られます。

自分でホストしているMP4ビデオを追加するには、ブロックエディターのビデオブロック（YouTubeブロックではない）を使用し、「アップロード」をクリックしてMP4を選択すると、WordPressはネイティブのHTML5ビデオプレーヤーを挿入します。自動再生をオフにし、最適なパフォーマンスのためにポスター画像を追加してください。

動画がページを遅くするのを防ぐ方法

YouTubeからのビデオの埋め込みは、ビデオ自体が彼らのサーバー上にあるため高速です。しかし、プレーヤーは依然としてページにスクリプトをロードし、それがパフォーマンスに影響します。ここでは、物事を迅速に保つために、すべてのビデオページで行っていることを紹介します。

• 遅延読み込み：ビデオプレーヤーは、ユーザーがスクロールしてそこに到達したときにのみ読み込まれます。SeedProdでは、ビデオポップアップブロックの設定でこれを直接有効にできます。ブロックエディターでは、WordPressはバージョン5.5以降、デフォルトでビデオを遅延読み込みしています。
• カスタムサムネイル（画像オーバーレイ）：ページ読み込み時にフルプレーヤーを読み込む代わりに、軽量な画像を表示します。プレーヤーは訪問者が再生をクリックしたときにのみ初期化されます。SeedProdのビデオオーバーレイオプションはまさにこれを実行します。典型的なYouTube埋め込みの場合、これにより初期ページの重量が大幅に削減されます。
• 直接アップロードを避ける：前述のように、WordPressにアップロードされたビデオは独自のサーバーから配信されます。ビデオを自分でホストしている場合は、CDNを使用して訪問者に近いサーバーから配信してください。
• レスポンシブビデオ：ブロックエディターからの自動埋め込みビデオは、デフォルトでレスポンシブです。手動のiFrameには、上記の方法4で説明したCSSラッパーが必要です。

最大の成果はカスタムサムネイルからもたらされます。デフォルトのYouTube埋め込みをオーバーレイ画像に切り替えるだけで、ページのレンダリング時間が半分近く短縮されるのを見てきました。これは5分間の変更で、実際の速度の違いがあります。

動画をアクセシブルにする

完了と呼ぶ前に、さらに2つのことを行う価値があります。

• キャプション：YouTubeでクローズドキャプションを有効にするか、SRTファイルをプラットフォームに直接アップロードします。Vimeoの場合、ビデオ設定で同じオプションが利用可能です。キャプションは、聴覚障害のあるユーザーを支援し、騒がしい環境の視聴者の視聴時間を改善します。
• トランスクリプト：ビデオの下にテキストトランスクリプトを貼り付けます。これは重要なSEOシグナルであり、オーディオが全く聞こえないユーザーにもコンテンツをアクセス可能にします。
• 予期せぬ自動再生なし: SeedProd の遅延読み込み設定により、訪問者が選択するまで動画は再生されません。これはアクセシビリティの向上につながります。予期せぬ音声は、スクリーンリーダーのユーザーを混乱させます。

WordPressにビデオを埋め込む方法に関するFAQ

WordPressにYouTubeなしで動画を埋め込むにはどうすればよいですか？

SeedProd のカスタム動画ソースオプションまたはブロックエディタのカスタム HTML ブロックを使用します。SeedProd では、動画ブロックまたは動画ポップアップブロックを選択し、ソースとしてカスタムを選択して、動画の埋め込みコードを貼り付けます。ブロックエディタでは、カスタム HTML ブロックを追加し、動画プラットフォームから iFrame または埋め込みコードを貼り付けます。これは、Vimeo、自己ホスト型動画、および埋め込みコードを提供するあらゆるプラットフォームで機能します。

WordPressにMP4動画を追加するにはどうすればよいですか？

ブロックエディタの動画ブロック（YouTubeブロックではない）を使用してMP4を直接アップロードします。ブロックをクリックし、アップロードを選択して、MP4ファイルを選択します。WordPress はネイティブの HTML5 動画プレーヤーを挿入します。最適なパフォーマンスを得るには、自動再生をオフに設定し、動画が読み込まれる前に訪問者が静的なサムネイルを見られるようにポスター画像を追加してください。

WordPressにYouTube動画を埋め込めないのはなぜですか？

WordPress は埋め込みを許可するように設定する必要があります。「設定」>「メディア」に移動し、「プレーンテキスト URL の自動埋め込みを試みる」がチェックされていることを確認します。埋め込みがまだ失敗する場合は、動画の所有者が相手側で埋め込みを無効にしている可能性があります。

共有リンクや短縮URLではなく、アドレスバーの標準動画URLを使用してください。これらは自動埋め込み検出を壊れることがあります。

WordPress で動画の読み込み速度を最適化するにはどうすればよいですか？

訪問者がスクロールして動画プレーヤーが表示されるまで読み込まないように、遅延読み込みを有効にします。デフォルトのプレーヤーの代わりにカスタムサムネイル（画像オーバーレイ）を使用します。フルプレーヤーはクリック時にのみ初期化されるため、初期ページウェイトが大幅に削減されます。

動画を直接 WordPress にアップロードすることは避けてください。自己ホストしている場合は、CDN を使用して訪問者に近いサーバーからファイルを配信してください。

WordPressで動画を自動再生できますか？

はい、ただし Chrome や Safari などのブラウザは、動画がミュートされていない限り、自動再生をブロックすることがよくあります。ブラウザの要件とアクセシビリティ基準を満たすために、自動再生動画は無音で開始し、表示可能な再生コントロールを含める必要があります。

SeedProd を含む多くのページビルダーや動画プラグインでは、ブロック設定パネルで直接自動再生とミュートの設定を切り替えることができます。

その他の役立つWordPressガイド

動画が埋め込まれ、高速に再生され、ページ速度スコアを低下させません。これで、URL を貼り付けて最善を願うだけのほとんどの WordPress サイトよりも有利な立場にあります。

ランディングページ、サイドバー、テーマテンプレートで動画の配置を最も細かく制御したい場合は、SeedProd を入手すれば、午後にはセットアップできます。

WordPressサイトを改善するための他の方法を探している場合は、次のガイドが役立つかもしれません。

• WordPressにFacebook動画を埋め込む方法
• カスタムWordPressソーシャルメディアアイコンをウェブサイトに追加する方法
• WordPressサイトを保護する方法
• WordPressサポートを受ける方法（初心者向け）

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。