外部メディアファイルを埋め込む

ページ、ブログ投稿記事、およびナレッジベース記事の中でリッチ テキスト モジュールに外部メディアファイル（YouTube動画など）を埋め込むことができます。また、ページのドラッグ＆ドロップエリアまたはドラッグ＆ドロップ Eメール エディターで動画モジュールに動画を埋め込むこともできます。 

動画とのやり取りをトラッキングするには、代わりにコンテンツにHubSpot動画を追加する方法をご覧ください。

サポートされているメディアタイプ

埋め込み機能では、ほとんどのメディアタイプ向けのoEmbed形式のURLがサポートされています。oEmbed形式を使用するプラットフォームには、YouTube、Spotify、Vimeoなどがあります。サポートされているメディアプロバイダーの全リストについては、oEmbedの資料を参照してください。

プライベートYouTube動画など、追加のセキュリティー機能を持つメディアファイルはサポートされていません。

外部メディアファイルをリッチ テキスト モジュールに埋め込む

注：外部メディアファイルをマーケティングEメールのリッチ テキスト モジュールに埋め込むことはできません。 

リッチ テキスト エディターにURLを直接貼り付けることで、リッチ テキスト モジュールにメディアファイルを埋め込むことができます。メディアファイルのURLを追加するときにエラーメッセージが表示された場合、代わりに埋め込みコードを挿入することをHubSpotではお勧めします。

URL使用して外部メディアファイルを埋め込む

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ナレッジベース：HubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。
• ページ、投稿、または記事の上にカーソルを置き、［編集］をクリックします。
• コンテンツエディターでリッチ テキスト モジュールをクリックします。
• メディアファイルのURLをリッチ テキスト モジュールの中に貼り付けます。メディアファイルのプレビューが自動的に取り込まれます。

埋め込みコード使用して外部メディアファイルを埋め込む

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ナレッジベースHubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。
• ページ、投稿、または記事の上にカーソルを置き、［編集］をクリックします。
• コンテンツエディターでリッチ テキスト モジュールをクリックします。
• リッチ テキスト ツールバーで、［挿入］ドロップダウンメニューをクリックし、［埋め込み］を選択します。
• ダイアログボックスで、外部メディアファイルの埋め込みコードを入力します。ファイルのプレビューが表示されます。
• ［挿入］をクリックします。

外部メディアファイルの形式設定 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ナレッジベースHubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。
• ページ、投稿、または記事の上にカーソルを置き、［編集］をクリックします。
• コンテンツエディターでリッチ テキスト モジュールをクリックします。
• 埋め込みファイルをクリックします。
• ツールバーでメディアファイルの位置、寸法、間隔を編集します。 
  • ファイルのサイズを変更するには、幅と高さのピクセル値を入力します。

• • テキストブロック内のメディアファイルの位置を調整するには、inline位置合わせアイコンをクリックします。
  • 動画をレスポンシブにするには、fullWidth全幅アイコンをクリックします。動画は視聴に使われるデバイスの全幅まで最大化されます。

注：<script>タグ付きの埋め込みメディアファイルは動的コンテンツを作成するので、そのようなファイルでは全幅がサポートされません。

• メディアファイルの詳細オプションを編集するには、edit編集アイコンをクリックします。
  • 開発者は［埋め込みコード］テキストフィールドで埋め込み動画のスタイルと動作を編集できます。 
  • 既定で、メディアファイルは、遅延読み込みが使用され、訪問者がページの領域にスクロールした場合にのみ読み込まれます。ページが読み込まれるときにメディアファイルの読み込みを開始するには、［オプションを読み込み中］ドロップダウンメニューをクリックし、［遅延しない］を選択します。 

外部メディアファイルを置換する

埋め込み外部メディアファイルを置換する必要がある場合は、元のファイルを削除した後、新しいファイルのURLを次のように埋め込みます。 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ブログ］の順に進みます。
  • ナレッジベースHubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。
• ページ、投稿、または記事の上にカーソルを置き、［編集］をクリックします。
• コンテンツエディターでメディアファイルをクリックし、delete削除アイコンをクリックします。
• この手順を繰り返し、新しいファイルURLを埋め込みます。

動画モジュールに外部動画を埋め込む

さらに、動画モジュールを使用してページやマーケティングEメールに外部動画を埋め込むこともできます。このモジュールは、ページのドラッグ＆ドロップエリアおよびドラッグ＆ドロップ マーケティング Eメール エディターのみで使用可能です。

Eメールで動画モジュールに外部動画を埋め込む

• HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
• Eメールの名前をクリックします。
• サイドバーエディターで動画モジュールをクリックし、Eメールにドラッグします。
• コンテンツエディターで、動画モジュールをクリックしてそのオプションを編集します。
• ［動画タイプ］で［埋め込み］を選択します。
• ［動画のURL］を入力します。

• 左側のサイドバーエディターで、動画の寸法、サムネイル画像、ポジショニングを次のように編集します。
  • 動画のサイズを変更するには、幅または高さを入力します。
  • 動画のサムネイルをカスタマイズするには、［画像をアップロード］をクリックしてコンピューターから画像をアップロードするか、［画像を参照］をクリックしてファイルツールから画像を追加します。
  • モバイルデバイスの全幅で動画を表示するには、［モバイルデバイスで最大幅として表示］チェックボックスをオンにします。動画が元の寸法よりも大きい幅で表示されることはありません。
  • 動画を右または左に移動するには、［位置合わせ］ドロップダウンをクリックし、［左］、［中央］、または［右］を選択します。
  • 動画のサイドにスペースを追加するには、［パディング］スイッチをクリックしてオンに切り替えます。［上］、［下］、［左］、または［右］の各テキストフィールドにパディングのピクセル値を入力します。または動画のすべてのサイドに同じパディングを適用するには、［すべてのサイドに適用］チェックボックスをオンにします。

ページの動画モジュールに外部動画を埋め込む

注：ドラッグ＆ドロップエリアを含むページにのみ、動画モジュールを追加できます。

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
• 対象のページの上にカーソルを置き、［編集］をクリックします。
• サイドバーエディターで動画モジュールをクリックし、ページの中にドラッグします。
• コンテンツエディターで、動画モジュールをクリックしてそのオプションを編集します。
• サイドバーエディターの［動画タイプ］セクションで、［埋め込み］を選択します。
• ［動画のURL］を入力します。

• さまざまなデバイスで動画のサイズが変更されるかどうかを次のように選択します。
  • 自動調整：動画はレスポンシブです。つまりブラウザーとデバイスのサイズに基づいて拡大縮小されます。
  • 幅と高さを固定：メディアはすべてのデバイスで常にこの正確なサイズになります。
• 動画をレスポンシブに設定した場合は、最大サイズを次のように選択します。
  • 本来のサイズ：動画が本来のサイズを超えて拡大されることはありません。
  • 全幅：動画は視聴に使われるデバイスの全幅まで最大化されます。
  • カスタム：動画は、サイドバーエディターで設定された特定の幅と高さを超えることはありません。［幅］と［高さ］テキストボックスに、これらの寸法をピクセル値で入力してください。
• 動画のサムネイル画像をカスタマイズするには、［アップロード］をクリックしてコンピューターから新しいファイルを選択するか、［画像を参照］をクリックしてファイルツールから画像を選択します。