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

エンベッド YouTube 動画をレスポンシブにする

更新日時 2018年 12月 19日

対象製品

Marketing Hub  Professional, Enterprise
Basic

YouTube 動画をレスポンシブにするには、次の CSS コードをサイトに適用されるスタイルシートに追加します。

  /* YouTube Responsive CSS for HubSpot */ 

.hs-responsive-embed {
position: relative;
height:0;
overflow: hidden;
padding-top:0;
padding-left:0;
padding-right:0;
}


.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom:56.25%;
}

この CSS コードは、コンテンツエディターのエンベッドメディア機能で追加された YouTube 動画に適用されます。

  • CSS コードを追加したら、エンベッドする YouTube 動画の共有 URL をコピーします。
  • ブログ、ランディングページ、またはウェブサイトページに移動します。
  • ページまたは投稿の上にカーソルを置き、[編集] をクリックします。
  • リッチテキストモジュールを見つけます。モジュールをクリックし、[挿入] > [エンベッド] の順にクリックします。
insert-embed-rich-text-editor
メディアを挿入する
  • YouTube 動画の共有 URL を [URL] フィールドに貼り付け、[OK] をクリックします。
embed-url
動画の URL を貼り付ける

この手順で追加した YouTube 動画は、レスポンシブになります。

注: 代わりに [コード] オプションを選択した場合、エンベッドコードを .hs-responsive-embed-youtube クラスでラップする必要があります (例:<div class="hs-responsive-embed-youtube"></div>)。