ウェブサイトに動画を追加することで、あなたとサイト訪問者に比類ない価値をもたらすことは、もはやノウハウではありません。ユーザーエクスペリエンスの向上（ビジュアル主導の文化では、人々は読むよりも見ることを好む）から、サイトにSEO効果をもたらします。 サイト滞在時間の増加、クリックスルー率の向上、コンバージョンの増加、ひいては収益アップは、ウェブサイトに動画を埋め込むことの明確なメリットのひとつです。世界中の多くのウェブサイト・デザイン会社が、ウェブサイトに動画を追加することが、ユーザー・エクスペリエンスの旅において大きな効果をもたらすことを保証しています。

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

さっそく始めよう！

ビデオエンベッドとは？

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

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

ほとんどの動画ホスティング・サービスは自動埋め込み生成機能を提供しているが、基本的な動画埋め込みコードの構造を理解しておいて損はないだろう：

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

URLの代わりに動画へのリンクを追加すれば、HTMLコードの完成です。HTMLを少し知っていれば、埋め込みコードを手動で調整することもできます。必要な高さや幅を追加したり、ページに表示したくない動画の特定の機能をブロックしたりできます。次のようになります：

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

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

アップロードしないで埋め込む：埋め込みビデオの主な利点

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

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

なぜ心配する必要があるのでしょうか？サイトのロード時間がコンバージョンにどのような影響を与えるかを示したグラフをご覧ください：

ソースクリスプ・ビデオ

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

しかし、動画を追加することがトラブルの原因になるだけだとは思わないでください。ウェブサイト上で動画を再生させることは、人々があなたのサイトに費やす時間（ポジティブなランキング要因）に大きく影響し、また、動画そのものがGoogleの1位ページに表示されるかもしれない。このように、すべては物事を正しく行い、アップロードよりも埋め込みオプションを選択するだけの問題なのです。

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

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

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

つまり、動画をアップロードするたびに、サーバーの容量を消費することになります。複数の動画をアップロードすることで、容量を使いすぎる可能性があり、複数のユーザーが同時に動画を閲覧すると、サイトのロード時間が大幅に遅くなる可能性があります。

さらに、動画のアップロードにはファイルサイズの制限もあります。あなたのサイトのホスティング・プラットフォームは、動画フォーマットやファイル・サイズに厳しい制限を設けている可能性が高いので、動画を圧縮しても使い物にならないことに気づくでしょう。動画の埋め込みでは、このような制限はありません。

ソースプロフォト

4.より高画質な動画をウェブサイトに埋め込む

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

動画ホスティングサイトの選択

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

動画ホストのコンセプトにベストもワーストもなく、本当に 適切な機能とコストのバランスの問題です。 そこで、適切な動画ホスティングサイトを選ぶ前に考慮すべき主な機能をまとめました：

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

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

スピードとサービスの質

ビデオホスティングを選ぶとき、その会社が最高のサービスを提供していることを確認したいものです。そのため、良いスピードとサービスの質が何を意味するかについて、2つの理解があります：

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

選手設定オプション

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

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

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

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

プライバシー

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

SEO

自分のサイトのランキングで勝負したいなら、動画ホスティングプラットフォームの選択は戦略的に行うべきだ。安定していて、かつ人気のある（つまり、ランキング自体が高い）ホスティングサービスを探し、 Googleのランキングのシェアを活用しよう。 まず、外部サイトで動画をホスティングすることで、アウトバウンドリンク（ バックリンク）が提供され 、独自ドメインの動画リッチスニペットを取得しやすくなる可能性があります。 したがって、これはあなたのサイトのランキングにも影響を与えるチャンスを与えることになります。

ソースモズ

分析およびデータ収集

あなたのビデオは顧客を魅了し、喜ばせるように設計されているので、当然、顧客がどのように喜んでいるかを知りたいと思うだろう。そのため、動画をホスティングするサービスでは、豊富なアナリティクスを見ることができるはずです。再生回数やコメントのような単純なものだけでなく、まったく異なる種類の複雑なデータもある。 動画を埋め込むことで、 Googleタグマネージャから特別なトラッキングコードを追加 し、Googleアナリティクスのアカウント内で、平均視聴時間や、視聴者が視聴をやめる瞬間などの追加分析を得ることができます。あなたの動画がどのように、そしてなぜ成功しているのか（あるいは成功していないのか）を知るためには、このようなデータがすべて必要なのです。

コスト

必要な機能をすべて検討し、プラットフォームとサポートに満足し、動画の品質について理解したら、最後に、そのプラットフォームが予算内に収まるかどうかを確認することです。そして、これはあなたが予想する動画再生回数と、動画ファイルの容量に依存します。大きな動画の再生回数が多ければ多いほど、より多くの帯域幅を使用していることになり、その分料金も高くなる。また、プラットフォームが月額契約か年間契約かを確認する価値もある。中小企業や動画を始めたばかりであれば、長期契約に縛られたくないでしょう。

埋め込みコードの生成方法

動画ホスティング・プラットフォームを選び、すべての動画コンテンツをアップロードしたら、あとはウェブサイトに動画を追加/埋め込むだけです。

動画ホスティング・サービスから動画を埋め込む

Wave.videoからの埋め込み

Wave.videoの動画を埋め込むには、 マイ プロジェクトで埋め込みたい動画を探します。そして、3つの点のアイコンにカーソルを合わせ、"Player "をクリックしてください。

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

ビデオプレーヤーをカスタマイズするには、「外観」タブを開き、プレーヤーの色を変更したり、表示されるコントロールを定義したり（もしあれば）、カスタムサムネイルを選択したりすることができます。Wave.videoのホスティング機能について詳しく知りたい方は、こちらの記事をご覧ください。

あなたのウェブサイトやブログにWave.videoで動画を埋め込む方法にはいくつかのオプションがあります。

• インライン埋め込み

これは通常の埋め込みで、動画を周囲のテキストやページの他のUI要素の中に配置します。

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

この方法で動画を埋め込むと、モーダルダイアログで動画が開き、他のコンテンツの上にポップアップ表示されます。

サムネイル、ハイライト、テキストリンクです。

YouTubeからの埋め込み

YouTubeの再生ページにアクセスし、「共有」ボタンをクリックし、「埋め込み」をクリックするだけです。埋め込みコードをコピーするだけでもいいですし、カスタマイズ可能なオプション（プレーヤーコントロールの表示／非表示、特定のポイントからの再生（先頭とは限りません）など）を設定することもできます。

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

Vimeoからの埋め込み

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

表示オプション」をクリックすると、この埋め込みコードを使用して動画を表示する方法をカスタマイズできます。プレーヤーの色やサイズ（念のため、レスポンシブにしておきましょう）、イントロの追加、ループ再生や自動再生などの「特別なもの」を追加することができます。

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

Wistiaからの埋め込み

メディアページに移動し、「埋め込みと共有」ボタンをクリックします。埋め込み＆共有画面が表示されますので、埋め込みコードタイプをコピーして、あなたのページ用に変更してください。

Wistiaには2種類の埋め込みコードがあります：インライン埋め込みとポップオーバー埋め込みです。インライン埋め込みコードは、動画を他のコンテンツと一直線上に配置することを意味し、ポップオーバー埋め込みコードは、動画をページのコンテンツ上にポップオーバーさせることを意味します。

Vidyardからの埋め込み

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

Vidyardのダッシュボードで、Content>Playerセクションをクリックし、プレーヤーにカーソルを合わせ、"share "をクリックします。Responsive Embedパートで、単にCopyCodeアイコンをクリックし、Use Lightboxオプションを選択して、コードをライトボックス埋め込みにします。プレーヤーの寸法を手動で入力して、最大幅と最大高を取得できます。

あなたのウェブサイトがJavaScriptをサポートしていない場合は、Trouble embedding? チェックボックスを選択し、代わりにiframe埋め込みコードをコピーすることができます。

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

フェイスブックからの埋め込み

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

必要であれば、"Include full post "オプションを選択すれば（チェックボックスを押すだけ）、Facebook投稿の対応するテキストが動画とともに追加される。

インスタグラムからの埋め込み

InstagramはFacebookが所有しているので、埋め込みプロセスは非常に似ている。アプリではなく）デスクトップからインスタグラムを開き、右上の「...」をクリックする。

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

ツイッターからの埋め込み

Twitterの動画を埋め込むには、アプリは使いません。デスクトップでツイートを開き、ツイートの「フォロー」ボタンの隣にあるドロップダウンメニューから「ツイートを埋め込む」を選択します。そして、「ツイートを埋め込む」オプションを選択します。

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

TikTokからの埋め込み

TikTokでは、"埋め込みコードを取得 "ボタンがビデオの右側に表示されます。自動再生付きの340×700のプレーヤーへのリンクが表示されるだけで、選択できるオプションはありませんが、埋め込みコードをウェブページに追加する際に、いくつかの設定を微調整することができます。

別の方法を使う動画埋め込みコードジェネレーター

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

Embed.lyやToolki、Siege Mediaのようなプラットフォームでは、動画の埋め込みコードを生成することができる。 Embed.ly、 Toolki、 Siege Mediaなどの プラットフォームでは 、動画の埋め込みコードを生成することができます。手元に動画のURLがあれば、これらのサイトが自動的に動画の埋め込みコードを作成してくれます。

しかし、この回避策にはいくつかの欠点がある：

• 通常、あなたのサイトに新しく埋め込まれた動画には、プラットフォームのウォーターマークが表示されます。
• ビデオのカスタマイズ機能は非常に限られている
• これらのプラットフォームは、アナリティクスを提供しておらず、Googleアナリティクスやサードパーティの分析プラットフォームで動画の統計情報をさらに追跡するためのトラッキングコードを追加する可能性さえありません。

ですから、動画ホスティング・プラットフォームを使う機会があれば、常にこのオプションを選んでください。

パートV：ウェブサイトにビデオを埋め込む方法

さて、動画埋め込みの利点についての知識を備え、適切な動画ホスティングサービスを選ぶ方法と埋め込みコードを生成する方法を知ったところで、実際に最も人気のあるサイトホスティングプラットフォームに動画を埋め込む方法の詳細をさっそく説明します。

HTMLに動画を埋め込む

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

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

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

埋め込みコードをコピーして、カーソルを置いた場所に貼り付けるだけです。保存」または「公開」を押せば完了です。

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

WordPressに動画を埋め込む

あなたのウェブサイトがWordPressで動作している場合、ビデオを埋め込むには2つのオプションがあります。

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

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

#その2：埋め込みコードを使用する

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

WordPressのテキストエディタ（ビジュアル・エディタと混同しないでください）にアクセスすると、ページのHTMLバージョンが表示されます。そして、このガイドのHTMLセクションで述べた、ウェブサイトに動画を埋め込む方法の手順に従ってください。

Shopifyに動画を埋め込む

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

最初のステップはとても簡単で、動画をホストしている場所から埋め込みコードをコピーするだけです。

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

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

ステップ 3: "INSERT VIDEO "ボタンをクリックします。

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

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がサポートしているプラットフォームでビデオをホストしていない場合は、ビデオの埋め込みコードをコピーする必要があります。そして、ビデオを追加するを選択する代わりに、「もっと見る」を押してください。ここで、HTML iframeを見つけ、埋め込みコードを貼り付けることができます。保存 "を押せば完了です。

最後の言葉

ウェブサイトへの動画の埋め込みに関連することは、ほぼすべて網羅したように思えます。これだけ広範囲に読んで、私たちが言いたいのは、サイトに動画を追加することは、SEOや分析、収益部門に価値をもたらすだけではないということです。人々は動画が大好きで、あなたが貴重で、面白く、消化しやすいコンテンツを作るために投資した時間を高く評価します。 動画がユーザーエクスペリエンスに影響を与えないようにしなければなりませんが、動画埋め込みはそのための素晴らしいツールです。

このガイドに追加してほしいことがあれば、コメントでお知らせください。まだ未解決の質問はどれですか？このガイドを更新してほしい動画ホスティングプラットフォームや サイトホスティングサービスはどれですか？ ウェブサイトに動画を埋め込み、最高のユーザーエクスペリエンスを提供することに関して、苦労していることや課題は何ですか？