お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

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

更新日時 2021年 4月 23日

対象製品

Marketing Hub  Professional, Enterprise
Service Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

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

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

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

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

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

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

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


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

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

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

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

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

  • HubSpotアカウントで、ウェブサイトページ、ランディングページ、ブログ、またはナレッジベースに移動します
  • ページ、投稿、または記事の上にカーソルを置き、[編集]をクリックします。
  • コンテンツエディターでリッチ テキスト モジュールをクリックします。
  • 埋め込みファイルをクリックします。
  • ツールバーでメディアファイルの位置、寸法、間隔を編集します。 
    • ファイルのサイズを変更するには、幅と高さのピクセル値を入力します。
    • テキストブロック内のメディアファイルの位置を調整するには、inline位置合わせアイコンをクリックします。
    • 動画をレスポンシブにするには、fullWidth全幅アイコンをクリックします。動画は視聴に使われるデバイスの全幅まで最大化されます。

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

edit-your-embedded-video
  • メディアファイルの詳細オプションを編集するには、edit編集アイコンをクリックします。
    • 開発者は[埋め込みコード]テキストフィールドで埋め込み動画のスタイルと動作を編集できます。 
    • 動画の遅延読み込みを有効にするには、[遅延読み込み]ドロップダウンメニューをクリックし、[遅延]を選択します。これにより、訪問者がその場所にスクロールするまではメディアファイルが読み込まれなくなります。遅延読み込みは既定で無効になっています。 

edit-embed-code-1

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

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

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

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

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

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

add-padding-to-video-module

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

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

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

embed-external-video

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

adjust-video-size


  • [変更を適用]をクリックします。