【こんな簡単なこと!?】ブログに貼ったYouTube動画をスマホ画面サイズに合わせる方法【備忘録】

  • 2021年1月13日
  • 2021年3月15日
  • BLOG

 

ブログ初心者の頃は(私もですが)、記事を書くたびに

『あれっ?これどうすればいいんだろ。』ってなることがけっこうありますよね。

そのたびに、ググりまくりです(笑)

 

 

ところで、

パソコンからブログ記事に貼ったYouTubeの動画をスマホで見た時に、スマホの画面からはみ出したようになってしまってませんか?

 

最近では、ほとんどの読者の方がスマホからブログ記事などを見ていることが多いと思います。

読者さんに快適に読んでもらうためにも、修正しておいたほうがいいですね。

 

今回は、

YouTubeのブログに貼り付けた動画を、スマホの画面幅サイズに合わせる方法
について解説します。

ほんっとに簡単に修正ができますので、「知らなかった〜!」という方はぜひ参考にしてみてくださいね!

 

 

YouTubeの動画をスマホ画面サイズに合わせる方法

 

方法は、

貼り付けたYouTube動画のコードのサイズを調整するだけ

 

分かりやすいように、画像で見ていきますね。

 

YouTube動画をパソコンからブログ記事に貼り付けした場合、スマホで確認すると下の画像のように画面からはみ出してしまいました。

はみ出た幅の分、記事が右に動いてしまいます。

 

 

では、修正していきましょう!

① YouTube動画を通常通りブログ記事に貼り付けたら、「テキスト入力」画面に移動します。

 

 

こちら⇩が、修正前の貼り付けたYouTube動画のHTML(動画コード)。

 

 

 

② HTML動画(動画コード)を修正する。

赤で囲まれた、【Width】の部分を【100%】に書きかえます。「” ”」は消さないでね。

 

 

③ 修正した部分を、スマホで確認してみる。

 

修正したあとは、必ずスマホで確認してみてくださいね。

下の画像の通り、スマホ画面に表示される文字の幅より、はみ出てないことが確認できました。

以上で修正完了です。

 

コードの数字を修正した後は、忘れずに【下書き保存】しておいてくださいね!

まとめ

いかがでしたか?

修正の方法は、他の部分にも活かせることが可能です。

貼り付けた楽天やアマゾンのバナーなどにも、同様の方法でスマホ幅のサイズに合わせることができますよ!

 

ブロガーを続けていく上で、この小さな修正へのこだわりが大切だと思ってお互い頑張りましょう。

 

 

お読みいただきありがとうございました。
最新情報をチェックしよう!