ヘルプセンター
 　無料お試し　 

YouTube動画をスマホ対応（レスポンシブ）に埋め込む方法

2025年10月2日
 
 
PAGEKitではYouTubeの動画を簡単にページに埋め込むことができますが、YouTubeから発行される標準の埋め込みコードは固定サイズで指定されているため、そのままではスマートフォンで閲覧すると画面からはみ出してしまいます。
今回は、少しコードを加工して画面幅100%で自動調整されるレスポンシブ対応にする方法をご紹介します。

手順1：YouTubeの埋め込みコードを取得

まずは埋め込みたいYouTube動画のページを開きます。動画下部の「共有」→「埋め込む」からコードをコピーしてください。
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXX" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>;

手順2：動画URLを抜き出す

コピーしたコードの中から、 「src="～"」 で囲まれた部分のURLだけを取り出します。下記のような文字列です。
https://www.youtube.com/embed/XXXXXXX

手順3：レスポンシブ対応のコードに差し替える

次に、以下のコードをコピーしてください。
<div style="position: relative; width:100%; padding-top:56.25%;">
<iframe style="position:absolute; top:0; left:0; width:100%!important; height:100%!important;" src="XXXX" frameborder="0" allowfullscreen>
</div>
 
この中の 「XXXX」 の部分に、先ほど抜き出したYouTubeのURLを貼り付けます。

例：

<div style="position: relative; width:100%; padding-top:56.25%;">
<iframe style="position:absolute; top:0; left:0; width:100%!important; height:100%!important;" src="https://www.youtube.com/embed/XXXXXXX" frameborder="0" allowfullscreen>
</div>

手順4：PAGEKitに貼り付け

作成したコードを、以下のHELPページを参考に「htmlコード変換ツール」で変換して編集画面に貼り付けます。

まとめ

  • YouTubeの標準コードは固定サイズなので、そのままではスマホで崩れる
  • URLだけを取り出し、レスポンシブ対応のコードに組み替える
  • PAGEKitの「htmlコード変換ツール」機能で貼り付ける
これでスマートフォンでも快適に動画を見せられるようになります。
 
ABOUT ME
PAGEKit編集部
ホームページを最短15秒で作れる！PAGEKitは、誰でもかんたんにホームページを作成・管理できるサービスです。
私たちPAGEKit編集部は、ホームページをもっと便利に、もっと楽しく使っていただけるよう、日々TIPSや活用アイデアを発信しています。
 

ホームページかんたん作成のPAGEKit（ページキット）

 
 
ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？