Become a HubSpot power user — join us for HubSpot Training Day 2017.

COS-Pages-Editor

埋め込みのYouTube動画をレスポンシブ対応にするにはどうすればよいですか。

更新日時 November 29, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

YouTube動画をモバイルデバイス向けに最適化するには、サイトに適用されているプライマリCSSファイルまたはスタイルシートに以下のコードを追加します。

/* YouTube Responsive CSS for HubSpot */

.hs-responsive-embed-youtube {

position: relative;

padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

padding-top: 25px;

}

.hs-responsive-embed-youtube iframe {

position: absolute;

width: 100%!important;

height: 100%!important;

}

このコードは、コンテンツエディターの埋め込みメディア機能から追加されたYouTube動画に適用されます。

  • このコードを追加したら、該当するYouTube動画の共有URLをコピーします。
  • ブログ、ランディングページ、またはサイトページのエディターを開きます。
  • リッチテキストモジュールで、[挿入] > [動画を挿入]の順にクリックします。
メディアを挿入
メディアを挿入
  • [メディアURL]入力欄にYouTube動画の共有URLを貼り付けます(サイズは空のままで構いません)。
  • [OK]をクリックします。
動画のURLを貼り付け
動画のURLを貼り付け

この手順で追加したYouTube動画はすべて、モバイルデバイス向けに最適化されます。

注:動画を埋め込みにする場合は、「.hs-responsive-embed-youtube」クラスで埋め込みコードを包む必要があります。つまり、埋め込みコードの前後に次のタグを挿入します。