ウェブサイトにビデオを追加することで、あなたとあなたのサイト訪問者に比類ない価値をもたらすことは、もはやノウハウではありません。このビジュアル重視の文化において、人々は読むよりも見ることを好みます。また、ユーザーエクスペリエンスの向上から、SEOの効果も期待できます。 サイト滞在時間の増加、クリックスルー率の向上、コンバージョンの増加、ひいては収益の増加など、ビデオをウェブサイトに埋め込むことの利点は明らかです。

しかし、この場合、単純なアップロードでは不十分です。Webサイトに動画を埋め込むのが本当の方法です。ビデオの埋め込みは、ルーチンワークのように見えるかもしれませんが、しかし、それはその明確なカットではありません。1つの場所から別の場所にビデオを埋め込む方法について、こことそこに非常に多くの情報と、我々は それをすべてカバーする、あなたのウェブサイトにビデオを埋め込むための究極のガイドを作成することを目的と した。

さっそく飛び込んでみましょう

Part I: Video Embedとは？

まず何よりも、動画埋め込みの主要な要素である「埋め込みコード」の背後にあるものを理解することが重要です。エンベッドコードとは、ビデオやその他の種類のコンテンツをあなたのウェブサイトに追加するために使用できるHTMLコードの一部です。

このコードのスニペットは、あなたのWebサイトにビデオを表示するのに役立ちます。これは、実際にあなたのウェブサイト上でそれをホストするために "強制 "せずに、その元のソースからビデオをプルアップします。 これは、ビデオがあなたのウェブサイトのロード時間に影響を与えることを心配する必要はありませんし、それはまた、あなたのニーズに最適な様々なビデオホスティングサービス間の配列の選択肢を開きますことを意味します。

ほとんどの動画ホスティングサービスは自動埋め込み機能を提供していますが、基本的な動画埋め込みコードの構造を理解しておいて損はないでしょう。

<iframe src="URL'></iframe>.

URL部分の代わりに、ビデオへのリンクを追加するだけで、ほら - そこにあなたのHTMLコードです。必要な高さと幅を追加したり、あなたのページに表示したくないビデオの特定の機能をブロック：HTMLのビットを知っていることはまた、手動で埋め込みコードを調整することができます。次のような感じです。

なぜ、動画をサイトにアップロードするだけで、その手間を省くことができないのでしょうか？Googleはしばしば、動画はウェブサイトのロード時間を大幅に増やし、サイトスピードを低下させ、その結果、ユーザー体験に影響を与え、SEOにマイナスの影響を与えると述べています。したがって、あなたは、トラフィック、ランキングなどを失う可能性があります。サーバーの過負荷、余分なコストなどについては言うまでもありません。

ウェブサイトに動画を埋め込むと、これらの問題のほとんどを克服することができます。その理由は以下の通りです。

Part II: 埋め込み型はアップロードしない。埋め込み型ビデオの主な利点

1.動画のロード時間を長くするために、ウェブサイトに動画を埋め込む（SEO対策も）。

動画をサイトにアップロードすると、動画の読み込みに時間がかかり、それがページの読み込み時間に影響することがあります。そのため、サイト訪問者は、ビデオの読み込みが遅くなったり、予期せぬ一時停止が発生したり、全体的に再生が拒否されたりすることがあります。ビデオを埋め込む ことで、サイトスピードをバランスよく維持し、ユーザーエクスペリエンスに悪影響をもたらさない ようにすることができます。また、 Googleのジョン・ミューラー氏によると、 モバイルファーストの時代において、サイトスピードは重要なランキング要因の1 つとなっています。

なぜそんなことを気にする必要があるのでしょうか？サイトのロード時間がコンバージョンにどのように影響するかを示すグラフをご覧ください。

出典クリスプビデオ

つまり、基本的にロード時間が短いと、順位が下がり、トラフィックが減り、コンバージョンが減り、そして...収益が減るということです。

しかし、ビデオを追加してもトラブルが起こるだけだと思わないでください。ウェブサイト上でビデオが再生されることは、人々があなたのサイトに費やす時間に大きな影響を与えます（ポジティブなランキング要因）。また、ビデオ自体がGoogleの1位のページに表示されることもあり、それがトラフィックをもたらし、その後に続くすべてのものが表示されます。このように、すべては正しい方法で、アップロードよりも埋め込みオプションを選択することが重要なのです。

2.帯域制限を克服するためのウェブサイトへの動画埋め込み

ビデオをアップロードすると、自分のサーバーの帯域幅を使い果たすことになります（これにはコストがかかります）。そして、誰かがあなたのビデオをリンクしたり、自分のウェブサイトに埋め込んだりするたびに、あなたのサイトは再びあなたの帯域幅を使用することになり、損害を受けることになります。これはコスト高で非効率的です。

3.ファイルサイズやストレージの制限を避けるため、ウェブサイトに動画を埋め込む

ホスティングサイトには常にストレージの上限が設定されているため、動画をアップロードするたびに、サーバーの容量を消費していることになります。複数のビデオをアップロードすると、容量が大きくなりすぎる可能性があり、複数のユーザーが同時にビデオを表示すると、サイトのロード時間が大幅に遅くなる可能性があります。

さらに、動画のアップロードには、ファイル・サイズの制限の問題もあります。あなたのサイトのホスティングプラットフォームは、ほとんどの場合、ビデオのフォーマットとファイルサイズに厳しい制限を持っているので、あなたは使い物にならないほどビデオを圧縮することになるでしょう。ビデオ埋め込みは、あなたにこれらの制限を取得することはありません。

出典プロフォト

4.Webサイトに動画を埋め込んで高画質化する

ファイルサイズの制限から、サイトに動画をアップロードする際の動画品質の制限に迫っています。苦労して作った高画質の動画をウェブサイトに表示したい場合、サードパーティのサイトに保存すれば、ホスティングアカウントのファイルに関する情報を保持するデータ構造である「inode limit」内に収まることが保証されます。そのため、訪問者が高解像度や低解像度で動画を閲覧できるように、動画ファイルを複数の形式やバージョンに変換することを考える必要がありません。

第三部：動画配信サイトの選び方

基本的に、あなたのウェブサイトにビデオを埋め込むことを選択することによって、あなたはそのための時間とリソースを持っている誰かにすべてのサーバー負荷の心配やファイルフォーマットの変更を残している。 しかし、あなたはおそらく理解しているように、あなたのウェブサイトにビデオを埋め込むために、あなたは、まず、サードパーティの ビデオホスティングプラットフォームにそれを追加する必要があります。そして、ここでは、多くの選択肢があります。

ビデオホストの概念に最高または最悪はありません、それは本当に 適切な機能とコストのバランスの問題 です。 そこで、適切な動画ホスティングサイトを選択する前に考慮すべき主要な機能をまとめました。

レスポンシブ・プレーヤー

動画ホスティングサイトは、視聴者に最高のユーザー体験と視聴体験を提供するために設計された、モバイル対応のリッチ メディア ウィジェットであるレスポンシブ動画プレーヤーを提供する必要があります。視聴者がデスクトップ画面、スマートフォン、タブレット、その他のどの画面サイズから視聴するかにかかわらず、動画は画面の幅いっぱいに拡大され、動画の元のアスペクト比は維持されます。これにより、ページレイアウトの歪み、画像の変形、動画の周囲に黒帯が表示される可能性のある静的サイジングを回避することができます。

スピードとサービスの質

動画ホスティングを選ぶとき、その会社が最高のサービスを提供しているかどうかを確かめたいものです。そのため、良いスピードとサービスの質が何を意味するのか、二重に理解する必要があります。

• 素晴らしい映像品質をサポートします。 2020年には、360pや480pの粒状の映像やアニメーションは、本当に余裕がありません。したがって、低予算で1080pを使用する場合を除き、選択した動画ホスティングサービスがUltraHD以上をサポートしているかどうかを確認してください。最高のプラットフォームは、自動的にHD / SD品質の間で切り替えることができます。
• 素晴らしいサポート＆カスタマーサービス。 サービスが使用しているサーバーの品質を再確認してください。サイトが時々クラッシュしませんか（これはあなたのウェブサイトのビデオ表示に影響します！）？DDoS攻撃を受けることはありませんか？そして、さらに重要なのは、顧客からの問い合わせに対する平均応答時間でしょう。

プレーヤー設定オプション

第一印象は重要です。ですから、あなたやあなたの顧客の目を引く最初のものは、 動画プレーヤのデザインです 。色からボタン、オートプレイ、必要なコマンドの設定まで、ビデオ・プレーヤーはカスタマイズできればできるほどよいのです。

Wave.videoの ホスティングにおける動画プレーヤーのカスタマイズオプション

リードジェネレーション機能

ウェブサイトに動画を追加する場合、それは リードジェネレーションマシンの 一部となります。ですから、あなたが選んでいるビデオプラットフォームが、実際にビデオを通じたリードジェネレーションをサポートしているかどうかを確認してください。この機能には、コールトゥアクションや訪問者（リード）の情報を取得する方法などが含まれます。そうでなければ、基本的にビデオプレーヤーにお金を払っていることになります。

プライバシー

オンラインで活動する場合、プライバシーは当然考慮しなければならない要素です。同じことが、あなたのビデオのプライバシーにも当てはまります。選択したビデオホスティングプラットフォームが、あなたの許可なく誰でもあなたのビデオを見たりダウンロードしたりできるようにしないことが重要です。 そのため、ホスティングサービスは、ダウンロードに厳しい規則を課すオプションと、その規則を実施する効率的な方法を提供する必要があります。パスワードを使用して動画を保護する機能は、動画ホスティングプラットフォームを選択する際に探すべき機能です。

SEO

自分のサイトのランキングで勝負したいのであれば、動画ホスティングプラットフォームの選択に戦略性を持たせる必要があります。安定性と人気（それ自体でランキングが高い という意味で）を兼ね備えた ホスティングサービスを探し 、Googleのランキングのシェアを活用 する。まず、外部サイトでビデオをホスティング すると、アウトバウンドリンク、つまり バックリンクが提供さ れ、独自ドメインのビデオリッチスニペットの取得が容易になる可能性があります。 したがって、これはあなたのサイトのランキングにも影響を与える機会を与えることになります。

ソースMoz

アナリティクスとデータ収集

動画はお客様を惹きつけ、喜ばせるためのものですから、お客様がどれだけ喜んでいるのかを知りたいと思うのは当然でしょう。そのため、動画をホストするサービスでは、多くの分析結果を見ることができるはずです。しかも、再生回数やコメントといった単純なものだけでなく、まったく異なる種類の複雑なデータも。 動画を埋め込むと、 Google Tag Managerから特別なトラッキングコードを追加し、 Google Analyticsアカウントで、平均視聴時間や一般的に視聴を中止する瞬間などの追加分析を得ることができるようになります。 動画がどのように、そしてなぜ成功したのか（あるいは失敗したのか）を知るためには、これらのデータがすべて必要です。

コスト

あなたが必要とするすべての機能を考慮したことを確認したら、あなたは、プラットフォームとサポートに満足している、とあなたは、ビデオの品質の周りにあなたの頭を持っている、最後のものは、プラットフォームがあなたの予算内に収まることを確認することです。そして、これはあなたが予想されるどのように多くのビデオのビューに依存し、あなたのビデオファイルがどのように大きいです。大きなビデオの多くのビューは、あなたがより多くの帯域幅を使用しているので、価格が増加することを意味します。それは、プラットフォームが毎月または年間の契約を可能にするかどうかを確認する価値もあります。あなたが中小企業やちょうどビデオを始めている場合、あなたはおそらく長期契約に縛られることを望むことはありません。

パート IV:エンベッドコードの生成方法

ビデオホスティングプラットフォームを選択し、すべてのビデオコンテンツをアップロードしたら、ウェブサイトへのビデオの追加/埋め込みから分離する唯一のステップがあります - その埋め込みコードを見つけること。

ビデオホスティングサービスからの動画の埋め込み

Wave.videoからのエンベデッド

Wave.videoのビデオを埋め込むには、「 マイプロジェクト 」から埋め込みたいビデオを探します。そして、3つの点のアイコンにカーソルを合わせて、「プレーヤー」をクリックします。

動画を埋め込む」というトグルをオンにすると、Wave.videoが動画用の埋め込みコードを自動生成します。トグルの下には、ビデオサイズの設定もありますので、この機能を忘れずに活用してください。

動画プレーヤーをカスタマイズするには、「外観」タブを開き、プレーヤーの色を変更したり、表示するコントロールを定義したり（ある場合）、カスタムサムネイルを選択したりすることを自由に行ってください。Wave.videoのホスティング機能についてもっと知りたい方は、こちらの記事をぜひご覧ください。

Wave.videoで動画をウェブサイトやブログに埋め込む方法には、いくつかの選択肢があります。

• インラインエンベッド

これは、あなたのページの周囲のテキストや他のUI要素の中にあなたのビデオを配置する通常の埋め込みです。

• ポップオーバーの埋め込み

この方法でビデオを埋め込むと、他のコンテンツの上にポップアップするモーダルダイアログでビデオが開かれます。

動画をページのコンテンツに組み込むには、サムネイル、ハイライト、テキストリンクの3つの方法があります。

YouTubeからの埋め込み

埋め込みコードをコピーするか、カスタマイズ可能なオプション（プレーヤーコントロールの表示/非表示、特定のポイントからの再生（先頭とは限らない））を設定することができます。

あなたがさらにカスタマイズしたい場合は、たくさんのパラメータがあります -自動再生、色、言語、ループ、および多く - あなたはiframeの埋め込み内に追加することができます。彼らはすべて 、Googleの開発者ページに記載 されています。

Vimeoからのエンベデッド

Vimeoの埋め込みコードは、動画の右側にある「共有」アイコンをクリックすることで表示されます。あなたは、様々なフレームでウィンドウが表示され、そのうちの1つは、あなたの埋め込みコードです。

表示オプション]をクリックすると、あなたのビデオは、この埋め込みコードで表示される方法をカスタマイズすることができます。あなたは、プレーヤーの色、そのサイズ（それがレスポンシブ保つ、念のため）、イントロを追加し、ループ、自動再生などいくつかの "特別なもの "を追加して変更することができます。

Pro、Business、Premiumにすることで、色やコンポーネントのカスタマイズ、エンド画面の追加、ロゴの追加などの特典を見ることができます。

Wistiaからのエンベデッド

メディアページに移動し、[埋め込みと共有]ボタンをクリックします。埋め込みと共有の画面が表示されますので、埋め込みコードの種類をコピーして、自分のページ用に変更します。

Wistiaでは、2種類の埋め込みコードを提供しています。インラインエンベッドとポップオーバーエンベッドです。インライン埋め込みコードは、ビデオを他のコンテンツと一緒に配置することを意味し、ポップオーバー埋め込みは、ビデオがページのコンテンツの上に飛び出すことを支援します。

Vidyardからのエンベデッド

Vidyardからのビデオ埋め込みには、プランでPlayer Embeds機能が必要であることに注意してください。Vidyardは、レスポンシブ埋め込みとiframe埋め込みの2つの埋め込みオプションに対応しています。

Vidyardのダッシュボードで、「コンテンツ」>「プレーヤー」セクションをクリックし、プレーヤーにカーソルを合わせて、「共有」をクリックします。Responsive Embed 部で、CopyCodeアイコンをクリックし、Use Lightbox オプションを選択するだけで、コードがライトボックス埋め込みになります。プレーヤの寸法を手動で入力して、最大の幅と高さを得ることができます。

JavaScriptに対応していないウェブサイトの場合は、「埋め込みに問題がありますか？」のチェックボックスを選択し、代わりにiframeの埋め込みコードをコピーしてください。

ソーシャルメディアから 動画を埋め込む

Facebookからの埋め込み

Facebookの各動画は、埋め込み機能に対応しています。Facebookの投稿の右上にある"... "をクリックし、"埋め込み "を押すだけでいいのです。

必要であれば、"Include full post "オプションを選択すれば（チェックボックスを押すだけ）、ビデオと一緒にFacebookの投稿から対応するテキストを追加することができます。

Instagramからの埋め込み

InstagramはFacebookが所有しているため、埋め込み方法は非常によく似ています。デスクトップからInstagramを開き（アプリではありません）、右上の「...」をクリックします。

埋め込み」を押して、埋め込みコードをコピーしてください。もう一度、あなたはあなたの埋め込みにキャプションを追加する（またはしない）ための選択肢を持っています。

Twitterからの埋め込み

Twitterの動画を埋め込むには、アプリを使用しないでください。デスクトップでツイートを開き、ツイート上の「フォロー」ボタンの横にあるドロップダウンメニューから「ツイートを埋め込む」を選択します。次に、「ツイートを埋め込む」を選択します。

埋め込みコードをコピー＆ペーストするだけです。ただし、Twitterの埋め込みでは、キャプション付きのツイート全体が表示され、単一のビデオを表示するオプションはありません。

TikTokからのエンベデッド

TikTokでは、動画の右側に「Get EmbedCode」ボタンが表示されます。あなたが得るすべては自動再生と340×700プレーヤーのリンクであるため、選択するオプションはありませんが、あなたのウェブページに埋め込みコードを追加するときにいくつかの設定を微調整することができます。

別の方法を使う動画埋め込みコード生成ツール

何らかの理由で、動画ホスティングサイトやソーシャルメディアから動画の埋め込みコードを取得するための簡単な手順を実行したくない場合は、確かに回避策があります。

別の方法もあります。本来は動画の埋め込みコードを生成するための特別なサイトをたくさん見つけることができます。 Embed.ly, Toolki, Siege Media などのプラットフォームでは 、動画の埋め込みコードを生成することができます。あなたがしなければならないのは、手元に動画のURLを持つことだけで、これらのサイトは自動的にあなたの動画の埋め込みコードを作成します。

しかし、この回避策にはいくつかの欠点があります。

• 通常、サイトに新たに埋め込まれた動画には、プラットフォームのウォーターマークが表示されます
• 映像のカスタマイズ機能は非常に限られている
• これらのプラットフォームでは、分析機能はもちろん、Google Analyticsやサードパーティの分析プラットフォームで動画の統計情報をさらに追跡するためのトラッキングコードを追加する可能性すらありません。

ですから、ビデオホスティングプラットフォームを使用する機会がある場合は、常にこのオプションのために行く。

第五部：ウェブサイトに動画を埋め込む方法

今、あなたはすべてのビデオ埋込みの利点についての知識を装備しているときに、右のビデオホスティングサービスを選択する方法と埋め込みコードを生成する方法を知っている、我々はすぐに最も人気のあるサイトのホスティングプラットフォームに実際にビデオを埋め込む方法の詳細を介してあなたを歩くでしょう。

HTMLに動画を埋め込む

ステップ1: htmlを編集する

動画を埋め込みたいページを編集モードで開く。動画を表示させたい箇所を選択し、そこにカーソルを置いてください。

ステップ2：埋め込みコードをコピー＆ペーストする

埋め込みコードをコピーして、カーソルを置いた場所に貼り付けるだけです。プレス、 "保存 "または "公開"、そしてそれはそれだ。

動画がコードを配置した場所に正確に表示されているかどうかを再確認し、ページと動画のパフォーマンスをモニターすることを忘れないでください。

WordPressに動画を埋め込む

WordPressで運営されているウェブサイトの場合、動画を埋め込むには2つの方法があります。

#1番目のオプション：URLのコピー/ペースト

Vimeo、YouTube、およびいくつかの他のような最も人気のあるビデオホスティングプラットフォームのために、あなたは完全な埋め込みコードを調べる必要はありません。ちょうどビデオのURLをコピーして、ビジュアルエディタに貼り付ける - 埋め込みコードは、自動的に生成されます。

#2 オプション：埋め込みコードを使用する

動画の表示に手を加えたい場合や、WordPressの自動埋め込みに対応していないプラットフォームで動画をホストしている場合があります。そのようなときは、ビデオの埋め込みコードを使用する必要があります。

WordPressの テキストエディタ（ビジュアルエディタと混同しないでください）に移動すると、あなたのページのHTMLバージョンが表示されます。その後、ちょうど私達はあなたのウェブサイトにビデオを埋め込む方法について、このガイドのHTMLセクションで上記言及手順に従います。

Shopifyに動画を埋め込む

ステップ1：埋め込みコードをコピーする

最初のステップは非常に簡単です - あなたのビデオをホストしている場所から埋め込みコードをコピーするだけです。

ステップ2: Shopifyの管理者ダッシュボードにログインします。

Shopifyの管理者ダッシュボードにログインします。現在のすべてのページは、「オンラインストア」→「ページ」の下に表示されているはずです。編集したいページに移動し、エディタツールバーにある記号をメモしておいてください。

ステップ3：「ビデオを挿入する」ボタンをクリックします。

リッチテキストエディタを選択し、ツールバーでビデオカメラのアイコンをクリックします。新しいウィンドウが表示されるので、ビデオの埋め込みコードを貼り付けて、「ビデオを挿入する」オプションを選択します。これで完了です。

Squarespaceに動画を埋め込む

埋め込みに関しては、SquarespaceはWordPressと非常によく似ています。埋め込みコードを使用するオプションと、ビデオのURLをコピー＆ペーストしてビデオを埋め込むオプション（YouTube、Vimeo、Animoto、Wistiaから埋め込む場合のみ可能）を選択できます。

Squarespaceはウェブサイトビルダーなので、ビデオをサポートする任意のブロックを追加し、単にあなたのビデオのURLをコピー/貼り付けるか、埋め込みアイコン（赤丸で強調表示）を押すと、あなたはあなたの埋め込みコードをコピー/貼り付けることができるポップアップウィンドウが表示されます。

Squarespaceでは、ビデオのタイトルと説明を微調整できるほか、「サムネイルを使用」のチェックを外すことで、そのページでビデオのカスタムメイドのサムネイルを追加することも可能です。

Wixに動画を埋め込む

Wixは、これまでのサイトホスティングプラットフォームと同様の原理で動作しています。ビデオ埋め込み用のコピー/ペーストURLオプションだけが、YouTube、Vimeo、DailyMotion、Facebookでホストされているビデオをサポートしています。

#1番目のオプション： URLのコピー/ペースト

ステップ1：エディターを開く

エディターの左側にある「+」アイコンをクリックし、「ビデオ」を選択します。Single Videos Playerで、ビデオがホストされているプラットフォーム（YouTube、Vimeo、DailyMotion、Facebook）を選択します。

ステップ2：動画のURLをコピーする

ビデオの変更」をクリックし、紹介したいビデオのURLをコピーします。このステップでは、再生とコントロールのオプションを微調整できます。

ステップ3：動画の位置を調整する

ドラッグ＆ドロップで、動画の位置や大きさを変更できます。そして、ページを保存するだけです

#2 オプション：埋め込みコードを使用する

もし、Wixがサポートしているプラットフォームでビデオをホストしていない場合は、ビデオの埋め込みコードをコピーする必要があります。そして、ビデオを追加するを選択する代わりに、"More "を押す必要があります。ここにHTML iframeが表示されますので、埋め込みコードを貼り付けることができます。保存 "を押して、あなたは行くには良いことだ。

最後の言葉

我々は、あなたのウェブサイトに動画を埋め込むことに関連するほとんどすべてのものをカバーしたように思える。このように広範囲に渡って読んできて、私たちが言わなければならないのは、サイトにビデオを追加することは、SEO、分析、収益部門にだけ価値をもたらすわけではないということです。人々は動画が大好きで、あなたが時間をかけて作成した、価値があって、楽しくて、消化しやすいコンテンツを高く評価しています。 動画がユーザー・エクスペリエンスに影響を与えないようにすることだけが必要 で あり、動画埋め込みはそのための素晴らしいツールなのです。

このガイドに追加してほしいことがあれば、コメントで教えてください。どの質問がまだ未解決のままですか？どのビデオホスティングプラットフォームまたはサイトホスティングサービスで、このガイドを更新してほしいですか？ 動画を Web サイトに埋め込み、最高のユーザー エクスペリエンスを提供する際に、どの ような 苦労や課題がありますか？