SWELLでYouTube動画をレスポンシブに埋め込む設定方法｜スマホではみ出す原因と対処法

2026年10月27日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

ブログにYouTube動画を貼ったら、スマホで見たときに画面からはみ出していた…という経験はありませんか。パソコンではきれいでも、スマホで崩れていると読者はすぐに離れてしまいます。SWELLでの動画埋め込みは、レスポンシブ対応がとても大切です。

この記事では、SWELLでYouTube動画をどの端末でもきれいに表示させる埋め込み方法を、手順付きで解説します。私が実際にやってしまった失敗もあわせてお伝えしますね。難しいコードは書かずに設定できますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

YouTube動画が、スマホではみ出しちゃったにゃ…

たいがブログ

よくあるお悩みですね。貼り方を変えるだけで解決できますよ。

ニャフィ

難しいコードを書かないといけないのかにゃ？

たいがブログ

URLを貼るだけの方法から、順番にご紹介しますね。

▼あわせて読みたい：動画入りの記事は、サーバーの速さで読み込みの快適さが変わります。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLでYouTube動画を埋め込む前に知っておきたい基本

レスポンシブとは、画面の幅に合わせて表示サイズが自動で変わる仕組みのことです。動画がこれに対応していれば、スマホでもタブレットでも画面にきれいに収まります。

SWELLはブロックエディターに完全対応しているので、動画の埋め込みもエディター上で完結します。大切なのは「どの方法で貼るか」を最初に決めておくことです。

埋め込み方法は「YouTubeブロック」と「埋め込みコード」の2種類

動画を貼る方法は、URLを入れるだけの「YouTube」ブロックと、YouTubeの「共有」から取得した埋め込みコード（iframe）の2つです。手軽さとレスポンシブ対応のしやすさで比べると、初心者の方には断然YouTubeブロックをおすすめします。

スマホで動画がはみ出す原因は「サイズの固定」

埋め込みコードには横幅と高さの数値が書き込まれています。この数値が残ったままだと、スマホでも同じ大きさで表示しようとして横にはみ出してしまうんです。私もブログ初期にコードをそのまま貼り、読者から「動画が切れています」と指摘されたことがありました。はみ出しの原因の多くは、このサイズ固定です。

SWELLでYouTube動画をレスポンシブに埋め込む方法

基本となるのは、URLを貼るだけのYouTubeブロックです。特別なCSSを書かなくても、画面幅に合わせて表示サイズが自動で調整されます。

以前使っていた別のテーマでは、iframeを囲むCSSを記事ごとに貼る必要がありました。SWELLはブロックを置くだけで済むので、作業時間がぐっと短くなっています。

URLを貼るだけの「YouTube」ブロックがおすすめな理由

YouTubeブロックは、横幅が記事のコンテンツ幅に合わせて自動調整されるため、縦横比を保ったまま表示されます。ブロックの下にキャプションも入れられるので、動画の補足説明を書き添えるのにも便利です。コードに触れないぶん、設定ミスの心配もほとんどありません。

動画は必要な本数に絞って貼る

動画プレーヤーは画像より読み込むデータが多いため、1記事に何本も貼るとページが重くなりがちです。レビュー記事に動画を5本並べたときは、スマホで本文が出るまで明らかに待たされました。本当に見てほしい1〜2本に絞るのがおすすめですよ。

STEP

YouTubeで動画のURLをコピーする

埋め込みたい動画を開き、動画の下にある「共有」ボタンからURLをコピーします。アドレスバーのURLでも問題ありません。

STEP

YouTubeブロックにURLを貼り付ける

編集画面の「＋」から「YouTube」ブロックを追加し、URLを貼って「埋め込み」をクリックします。プレーヤーが表示されれば成功です。

STEP

メディア設定とスマホ表示を確認する

右サイドバーの「メディア設定」で、小さな画面に合わせてサイズを変更する項目がオンか確認します。最後にプレビューでスマホ表示をチェックすれば完了です。

埋め込みコードを使うときにスマホで崩れさせない対処法

開始位置を指定したいときなどは、埋め込みコード（iframe）を使う場面もあります。その場合は、コードのサイズ指定が原因でスマホ表示が崩れやすくなるので注意が必要です。

ポイントは、横幅を画面いっぱいにして、縦横比だけを固定すること。この考え方さえ押さえておけば、難しい知識がなくても対処できますよ。

追加CSSで動画の縦横比を16:9に固定する

「外観」→「カスタマイズ」→「追加CSS」で、iframeの横幅を100%にし、aspect-ratio: 16 / 9で縦横比を固定しておくと、スマホでもはみ出さずに表示されます。以前の私は記事ごとにコードの数値を手で書き換えていましたが、追加CSSで一括指定してからは修正漏れがなくなりました。

キャプションで動画の要点を補足しておく

YouTubeブロックのキャプションに「3分あたりから設定手順を解説しています」のように要点を書き添えておくと、音を出せない環境の読者にも親切です。別のテーマではキャプションの見た目を自分で整える必要がありましたが、SWELLは本文になじむデザインで自然に表示されます。

▼あわせて読みたい：見やすく仕上げた記事も、検索で見つけてもらえなければもったいないですよね。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLのYouTube動画埋め込みでよくある質問

自分のチャンネル以外の動画も埋め込めますか？: はい、埋め込めます。ただし、投稿者が埋め込みを許可していない動画は再生できません。あくまで記事の補足として紹介する使い方を心がけましょう。
動画の途中から再生させることはできますか？: できます。YouTubeの「共有」メニューで開始位置にチェックを入れると、指定した時間から再生されるURLを取得できますよ。
URLを貼っても動画が表示されません。: まずはURLに余計な文字や空白が入っていないか確認してください。それでも表示されない場合は、キャッシュを削除してブラウザを再読み込みしてみましょう。
動画を埋め込むとSEOに悪影響はありますか？: 動画を貼るだけで順位が下がることはありません。内容に合った動画は読者の理解を助けてくれます。ただし貼りすぎると重くなるので、必要な分だけにしましょう。