YouTubeショート動画をウェブサイトに埋め込む方法 [2026]

最高のYouTubeショート動画は、ユーザーがYouTubeを離れた後も注目を集め続けるべきです。ウェブサイトにショート動画を追加することで、チャンネルにアクセスしたことのない訪問者にもコンテンツを届け、ウェブサイトのエンゲージメントを高めることができます。個々のショート動画を表示したい場合は、YouTubeのネイティブ埋め込みコードを使用してウェブサイトのページに埋め込むことができます。複数の動画を表示する場合は、ウィジェットを使用してYouTubeショート動画を動的なフィードとしてウェブサイトに表示できます。このガイドでは、YouTubeショート動画の埋め込み方法、レスポンシブデザインへの対応方法、複数のショート動画の追加方法、そして主要なウェブサイトプラットフォームへの設定方法について説明します。 

TL; DR

ウェブサイトに YouTube Shorts を埋め込む

Youtube
チャネル

Youtube
プレイリスト

Youtube
キーワード

Youtube
ハーフパンツ

今すぐ試す

ウェブサイトにYouTubeショート動画を埋め込む方法

最適な方法は、表示したい内容によって異なります。YouTube Shorts を個別に埋め込む場合は、通常、YouTube のネイティブ埋め込みコードで十分です。YouTube Shorts を Web ページにまとめて追加したり、コンテンツを常に最新の状態に保ったりする場合は、ウィジェットでフィードを管理できます。 YouTube API これらの基本的な埋め込み方法について。

方法1：YouTubeのネイティブ埋め込みコードを使用する

YouTubeのネイティブコードは、個別のフィードを追加せずにYouTube Shortsを個別に埋め込みたい場合に最適です。また、ウェブページにYouTube Shortsを埋め込む簡単な方法を探している場合にも、最も直接的な選択肢となります。

1. ウェブサイトに追加したいYouTubeショート動画を開きます。
2. 再生中の動画を右クリックし、「埋め込みコードをコピー」を選択してください。
3. iframeコードをウェブサイトのHTMLエディタまたはサポートされているコードブロックに貼り付けてください。
4. 必要に応じて、縦9:16のフォーマットを念頭に置きながら、iframeの幅と高さを調整してください。
5. ページを保存または公開して、ショート動画がウェブサイト上でどのように表示されるかを確認してください。

埋め込みコードには、YouTubeにどのショート動画を読み込むかを指示する固有の動画IDが含まれています。後で別の動画を埋め込む場合は、動画IDを新しいショート動画のIDに置き換えることができます。

YouTubeショート動画の埋め込みコード例

YouTube Shortsを手動で埋め込みたい場合は、標準のYouTube iframeを使用し、動画IDを独自のIDに置き換えることができます。

<div style="max-width:315px; aspect-ratio:9/16; margin:0 auto;">
<iframe width="100%"
height="100%"
src="https://www.youtube.com/embed/<Shorts_video_code>"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
    

YOUR_VIDEO_ID を、表示したいショート動画のIDに置き換えてください。9:16のアスペクト比により、埋め込み動画はYouTubeショート動画の縦型フォーマットに適合します。

方法2：ウィジェットを使用して複数のYouTubeショート動画を埋め込む

複数のショート動画をまとめて表示したい場合、個々のiframeコードを追加するのは管理がすぐに面倒になります。YouTubeショート動画ウィジェットを使えば、複数の動画を1つの画面にまとめて表示し、一元的に管理できます。

たとえば、 Tagembed YouTube Shortsフィードを作成し、ウェブサイトに追加するためのノーコードオプションを提供します。YouTubeソースを接続し、表示したいShortsを選択し、外観をカスタマイズしたら、生成されたウィジェットをページに追加できます。

このアプローチは補完することもできます YouTube自動化ツール YouTubeに公開したコンテンツに、別の表示場所を与えることで、コンテンツの価値を高めることができます。

YouTubeショート動画フィードを作成する

1. 申し込みます Tagembed アカウント または既存のアカウントにログインしてください。

2. 選択する YouTubeでご覧いただけます。 ソースとして選択し、 ハーフパンツ.

3. ショート動画を収集したいYouTubeチャンネルのURLを入力してください。

4. 詳しくはこちら フィードを作成 させて Tagembed 利用可能な動画を取得します。

5. 公開する前に、ウィジェットエディタで収集したコンテンツを確認してください。

接続された YouTube Shorts フィードは、表示したい動画を YouTube Shorts ウィジェットに自動的に表示します。 ソーシャルメディアウィジェット 他のプラットフォームのコンテンツを自社ウェブサイトに取り込む。

ショート動画をカスタマイズして管理する

フィードの準備ができたら、公開する前に表示を調整してください。

1. カスタマイズ設定またはレイアウト設定を開きます。
2. ページに合ったテーマとレイアウトを選択してください。
3. カードのスタイル、背景、フォント、その他の視覚要素を調整します。
4. 収集したショートフィルムを確認し、公開したくないものは非表示にしてください。
5. 必要に応じて、モデレーション設定を使用して不要なコンテンツを自動的にフィルタリングしてください。

これらの設定により、訪問者に表示される内容や、ウェブサイト上のYouTube Shortsウィジェットがページ全体にどのように配置されるかをより詳細に制御できます。

YouTubeショート動画の埋め込みコードを生成する

フィードの設定が完了したら、それをウェブサイトに接続するためのコードを生成します。

1. Video Cloud Studioで パブリッシュ ウィジェットエディタのオプション。
2. 選択 ウェブサイト 出版先として。
3. 使用したいレイアウトまたはギャラリーの種類を選択してください。
4. 必要に応じてウィジェットの幅と高さを設定してください。
5. 詳しくはこちら コードを生成 そして、提供されたコードをコピーしてください。

その後、このYouTube Shorts埋め込みコードを、お好みのウェブサイトプラットフォームで使用できます。生成されたYouTube Shorts埋め込みコードには、作成したウィジェット設定が含まれています。

ウェブサイトにウィジェットを追加する

最後のステップは、訪問者が目にする場所にウィジェットを配置することです。

1. ウィジェットを追加したいウェブページを開きます。
2. ウェブサイトビルダーが提供するHTML、埋め込みコード、または類似の要素を見つけてください。
3. 生成されたコードをその場所に貼り付けてください。
4. ページを保存または公開します。
5. ウェブサイトを更新して、デスクトップとモバイルの両方でウィジェットを確認してください。

これにより、YouTube Shortsを個々の動画を別々に追加することなく、ウェブサイトのページに簡単に組み込むことができます。接続されたフィードが更新されると、ウェブサイトのYouTube Shortsウィジェットは、個々の埋め込みコンテンツを置き換えることなく、利用可能なコンテンツを反映できます。

同じ設定を、 ウェブサイトにYouTubeチャンネルを埋め込む ページを充実させ、ショートフィルムだけでなく、より多くの作品を紹介していきます。

方法3. WordPressプラグインを使用する

WordPressのダッシュボードから主にウェブサイトを管理している場合、WordPressプラグインは便利な選択肢となります。埋め込みコードを手動で操作する代わりに、プラグインがWordPress内での接続と表示を処理してくれます。

Tagembed WordPressのプラグインYouTubeコンテンツを連携させ、生成されたフィードをWordPressページに追加することができます。この方法は、フィードを定期的に更新または管理する場合に特に効果的です。

方法4．Shopifyアプリを使用する

Shopifyユーザーは、テーマコードを繰り返し編集することなくYouTubeコンテンツを追加したい場合に、アプリを利用できます。

Tagembed ShopifyアプリYouTubeコンテンツを接続し、表示形式を設定して、ストアに表示させることができます。これは、商品やその他のストアコンテンツと並べてショート動画を表示したいページに最適です。

YouTubeショート動画を様々なウェブサイトプラットフォームに埋め込む方法

ほとんどのウェブサイトビルダーでは、HTML、埋め込み、コード、または同様の要素を使用して YouTube Shorts を追加できます。具体的なオプションはプラットフォームによって異なりますが、基本的なプロセスは同じです。単一の Shorts ではなくフィードを追加する場合、プロセスはプラットフォームによっても異なる場合があります。たとえば、専用のアプローチを使用して、 Google サイトの YouTube フィード 複数の動画を一緒に表示したい場合。 

ショーツをより良く見せるためのちょっとしたコツ

YouTube Shortsは縦長の9:16フォーマットを使用しているため、横長の動画コンテナ内に配置することは避けてください。Shortsが切り取られて見えたり、余白が多すぎる場合は、iframeまたはそのコンテナのサイズを調整して、縦長フォーマットに合うようにしてください。

モバイル端末からの訪問者向けには、可能な限り固定サイズではなくレスポンシブコンテナを使用してください。これにより、Shortコンテンツは画面上の利用可能なスペースに合わせてサイズが変更され、ページの他の部分に影響を与えることなく表示されます。

YouTube Shorts埋め込みコードとYouTube Shortsウィジェットの違い

どちらの方法でもウェブサイトにショート動画を表示できますが、それぞれ異なるニーズに対応できます。特定の動画を1つだけ表示したい場合は、YouTubeショート動画の埋め込みコードが適しています。複数のショート動画を表示し、それらを一元管理したい場合は、YouTubeショート動画ウィジェットの方が便利です。

特定のショート動画を表示する場合は、YouTube Shortsの埋め込みコードを使用すると設定が簡単になります。ショート動画を定期的に公開する場合や、複数の動画をまとめて表示したい場合は、YouTube Shortsウィジェットを使用すると、コンテンツをより簡単に管理できます。

他のソーシャルプラットフォームのコンテンツも同じウェブサイトに取り込みたい場合は、 ソーシャルメディアアグリゲーター それらを一元管理するのに役立ちます。

YouTubeショート動画を埋め込む際によくある問題

YouTube Shortsを正しく埋め込んだとしても、表示や再生に問題が発生する場合があります。ここでは、よくある問題とその解決方法をご紹介します。

ショートは横長に表示されます

標準的な16:9のビデオフレームではなく、縦長のコンテナを使用してください。ショートフィルムは9:16のフォーマットを使用しているため、その比率に合わせることで、意図した表示を維持できます。

動画の周囲に黒いバーが表示されます

これは通常、プレーヤーとそのコンテナのアスペクト比が異なる場合に発生します。コンテナの寸法を調整し、埋め込み要素の周囲の不要な余白を削除してください。

ショートがロードされません

動画が公開されていて、埋め込みが許可されているかどうかを確認してください。非公開、年齢制限付き、または埋め込み制限付きの動画は、ウェブサイトで再生されない場合があります。別の公開されているショート動画をテストすることで、問題がその動画固有のものかどうかを確認できます。

埋め込みはレスポンシブではありません

iframeのサイズを固定すると、モバイルデバイスでShortコンテンツがはみ出したり、小さく表示されすぎたりする場合があります。画面幅に合わせて調整されるレスポンシブコンテナを使用してください。

動画の寸法がおかしい

YouTube Shortsの埋め込みコードの幅と高さを確認してください。幅が広すぎたり、狭すぎたりするコンテナは、動画が引き伸ばされたり、切り取られたり、不要なスペースができたりする原因となります。

一部のショート動画は埋め込むことができません

すべてのショート動画が埋め込みプレーヤーで再生できるとは限りません。埋め込みが無効になっている場合や、動画に再生制限がある場合は、ウェブサイトに正常に表示できません。別のショート動画を試して、制限内容を確認してください。

YouTubeショート動画を埋め込むメリット

Shortsを埋め込むことで、既存の動画コンテンツの価値をウェブサイト上でさらに高めることができます。そのメリットは、単にページにビジュアル要素を追加するだけにとどまりません。

• エンゲージメントを高める: 短い動画は、閲覧中の訪問者に手軽に視聴できるコンテンツを提供します。関連性の高いショート動画をテキストコンテンツの横に配置することで、長い文章を区切り、ページをより分かりやすくすることができます。
• コンテンツの再利用: YouTube Shortsは、専用の動画を新たに作成しなくても、ウェブサイトのページに表示できます。製品デモ、簡単なヒント、チュートリアル、舞台裏映像などを既存のページに追加することで、役立つ情報を提供できます。
• YouTube ショーケース: ショート動画を埋め込むことで、ウェブサイトの訪問者にYouTubeで公開しているコンテンツを垣間見てもらうことができます。役に立つ動画や興味深い動画は、訪問者があなたのチャンネルをさらに探索し、あなたのチャンネルに貢献するきっかけとなる可能性があります。 YouTubeショート動画の視聴回数.
• サポートコンテキスト: ショートコンテンツは、テキストだけでは伝えにくいことを説明するのに役立ちます。例えば、製品デモでは製品の仕組みを分かりやすく示すことができ、簡単なチュートリアルでは、ページに長いセクションを追加することなく手順を説明できます。
• コンテンツの更新: 新しいショート動画を追加すると、頻繁にアクセスされるページに、全面的な再設計を必要とせずに新鮮なビジュアルコンテンツを提供できます。 ソーシャルメディアフィードを埋め込む 他のプラットフォームから定期的に更新されるコンテンツを、関連するウェブサイトのページに取り込む。

最終的な考え

YouTube Shortsは、自分のYouTubeチャンネルだけに限定せず、様々な場所で活用することで、より効果を発揮します。短いチュートリアル動画、製品デモ、舞台裏映像などは、関連するウェブサイトのページをより便利で魅力的なものにするのに役立ちます。

動画を1つだけ表示したい場合は、YouTube Shortsをページに直接埋め込むことができます。定期的にShortsを公開する場合や、複数の動画をまとめて表示したい場合は、YouTube Shortsウィジェットを使用すると、コンテンツの整理と更新が容易になります。

重要なのは、ページに何らかの付加価値を与えるショート動画を選ぶことです。動画が訪問者が既に読んでいるコンテンツを補完するものであれば、単に動画を追加するためだけに付け加えられたものではなく、ウェブサイトの自然な一部として感じられるでしょう。