youtubeをレスポンシブサイトやブログ記事に横幅100%可変埋め込み対応させる方法

すみません。

すでに、youtubeの仕様が変わっていたようです。

いくつかのパターンでしかサイズが変更できないようです。

変更してもうまくいきませんでした。

div 等で挟んで、position:absolute;

などで、浮かせたりした場合は設定できなくもないのですが、時間があるときに調べたいと思います。

 

 

 

 

 

ホームページ制作に限らず、ブログ記事を書いたりするときにグーグルマップや、youtubeをページに埋め込んだけど、横幅がなんかおかしい。

 

という時ってありません?

その場合ってほとんどの場合横幅サイズが固定になっているからなんです。

こんな感じで、width=”560″ というのが横幅で、560ピクセルという横幅サイズという意味です。

 

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/FzrARCqYCxo” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

ピクセルという単位は別に忘れてもらっていいのですが、今回の場合、例えばパソコンだと、横幅おっきく。

スマホの場合はスマホのサイズに合わせたい。

 

という時がありますよね?

 

その時は、横幅サイズを指定する所を100%にしてあげるときれいに横幅いっぱいに表示されます。

width=”560″ を

width=”100%” に変更

<iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/FzrARCqYCxo” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

なぜ、横幅を100%にするのか?という事ですが、同じブログ記事でも、見る人の状況で変わりますよね?

 

  • PCで見る人
  • タブレットで見る人
  • スマホで見る人
  • スマホの横幅が大きい人
  • スマホの横幅が狭い人
  • スマホも横向きで見る人

共通点は、横幅が変わるという事で、それぞれの端末サイズに合わせて個別に横幅を固定して表示する事はほぼ不可能なんです。

 

だからこそ、固定の数字サイズではなく、割合という意味で%で表示してあげるんです。

 

具体的にyoutubeをブログに張り付けて横幅を常に最大表示する手順を紹介

 

まず、埋め込みたい動画のyoutubeページへ移動します。

すると動画の右下あたりに、下記のような 共有 と書いてあるリンクがあるのでそれをクリック

すると、どういう所にサイトを共有しますか?というような、共有する種類を選択する画面が出てきます。

その時に

 

埋め込む

をクリック

 

すると、埋め込むためのインラインフレームと呼ばれる、タグのセットが表示されます。

 

ここで、埋め込むタグをコピーします。

 

 

 

埋め込む範囲を指定して、コピーしましょう。

 

 

 

そうしたら、ブログ記事に張り付ける事になります。

その際、ブログシステムによりますが、htmlモードや、テキストモード と呼ばれる状態で張り付けてください。

※ブログシステムによっては、ほかの呼び方をしている場合もあります。

そして、コピペしたら、前に説明した width=”560″ という所を、width=”100%”に変更して、保存してください。

 

これで、ブログ記事に表示されたyoutube の動画が、貼られた箇所の横幅最大に広がって表示されるはずです。

 

ちなみに、高さを高くしたり、低くしたい場合は、

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/FzrARCqYCxo” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

height=”315″

 

この数字を大きくしたり、小さくしたりしてください。

 

これでyoutube の高さを調整できます。

 

横幅や、縦幅のサイズ変更は、ブログ記事に張り付けて変更してもいいですし、埋め込みたい動画からタグをコピーする前に変更してコピーするでも構いません。

下記画像は、コピーする前に width=”560″ を width=”100%”に変更した画像です。

 

 

これで、端末ごとの動画のサイズを気にする必要がなくなりましたね。

実際、動画としては、スマホの場合はほとんどがyoutube 専用のアプリみたいなのが起動するとおもうのですが、見ていくときに画像サイズがはみ出してしまって、スクロールするときに左右にフワフワ揺れたりする原因にもなったりします。

 

そういう不具合も、これで解決です。

 

参考になれば幸いです。

ではまた。