スマホサイトに、Youtube の動画を表示する方法をお伝えします。
スマホで動画を見る人は、けっこう多いので、スマホサイトにYoutube の動画を表示したい場合は、ぜひ参考にしてくださいね!

スマホサイトにYoutube の動画を表示する方法は、
パソコンサイトにYoutube の動画を表示する方法と一緒
スマホは、「小型パソコン」であるため、スマホサイトにYoutube の動画を表示する方法と、パソコンサイトにYoutube の動画を表示する方法は、一緒です。
同じ手順で、Youtube の動画を表示することができるので、下記のページを見てみてください。
・Youtube の動画をホームページ上に表示する方法
上記のページの手順どおりにやれば、スマホサイトにYoutube の動画を表示することができますよ!
ただ、1点だけ、注意点がある
スマホサイトにYoutube の動画を表示することは、とても簡単なのですが、1点だけ、注意点があります。
それは、「横幅(width)の設定」です。
スマホというのは、機種によって画面サイズが異なります。
そのため、スマホサイトに表示するYoutube の動画は、どのスマホの画面サイズでも、キレイに表示されるように工夫をしてあげる必要があるということです。
具体的には、Youtube の動画の横幅は、デフォルトでは、具体的な数字(width="560")で指定されているのですが、
スマホサイトに貼り付ける場合は、下記のように、width の設定は、パーセンテージ(width="100%")に変更するようにしてください。
<iiframe width="560" height="315" src="https://www.youtube.com/embed/qjteexny5jo" frameborder="0" allowfullscreen><i/iframe>
↓ ↓ ↓ ↓ ↓
<iiframe width="100%" height="315" src="https://www.youtube.com/embed/qjteexny5jo" frameborder="0" allowfullscreen><i/iframe>
|
上記のように、Youtube のソースに書かれている「横幅(width)の設定」を、パーセンテージで指定することで、どの画面サイズのスマホでも、Youtube の動画がキレイに表示されるようになります。
スマホサイトにYoutube の動画を表示するときは、ここがポイントになるので、width の設定を、パーセンテージに変更することだけ、忘れないようにしてくださいね!