すみません。
すでに、youtubeの仕様が変わっていたようです。
いくつかのパターンでしかサイズが変更できないようです。
変更してもうまくいきませんでした。
div 等で挟んで、position:absolute;
などで、浮かせたりした場合は設定できなくもないのですが、時間があるときに調べたいと思います。
2019/04/02追記変更
このページは、通常はPCの場合右カラムがありますが、あえて、ＬＰのような感じでメインカラムのみにしています。
最大表示をわかりやすくするためです。
それ以外の意図はありません。
youtubeの動画を張り付ける時に、親要素の最大幅まで広げる方法を紹介します。
すでにご存じだとはおもいますが、普通にyoutubeの埋め込みたい動画を選んで、共有リンクをクリックして、埋め込むをクリックすると、埋め込みタグが表示されるのでコピーします。
共有をクリック
埋め込むをクリック
動画の埋め込みの下にある<iframe からなるタグをコピー
あとはこれをブログに張り付ければ埋め込み完成です。
あとは、100％表示のための調整を行います。
youtubeなどのiframeを簡単にレスポンシブ100％表示させる方法
CSSでyoutubeサイズをマックスにすることができます。
このCSSを、丸っとコピーして、
iframe {width: 100%;max-width: 100%;}
CSSファイルにコピペ保存してください。
これで完了です。
ワードプレスの場合：youtubeなどのiframeを簡単にレスポンシブ100％表示させる方法
ワードプレスの外観＞カスタマイズ＞追加CSS
に、下記を丸っとコピペ（前の項目と同じもの）すると、100％表示になります。
iframe {width: 100%;max-width: 100%;}
ただし、他にもiframe で表示している物があればそれも最大表示になる可能性があります。
youtubeだけ、100％レスポンシブ対応させる方法
youtubeの時だけ、という風にするなら、下記のdiv でくくるようにして、それを記事や固定ページ、などにテキストモードで張り付ける。
ビジュアルモードの時は、、タグ挿入ボタン経由で、張り付ける。
<div class=”youtube-area”>
ここにyoutubeタグを張り付ける。
</div>
そして、
CSSファイルにこれをコピペして保存
.youtube-area iframe {width: 100%;max-width: 100%;}
これで完了です。
ワードプレスの場合：youtubeだけ、100％レスポンシブ対応させる方法
ワードプレスの外観＞カスタマイズ＞追加CSS
これを貼りつける（同じものです）
.youtube-area iframe {width: 100%;max-width: 100%;}
というようにすれば、自動的にyoutube が100％表示になります。
まとめ
基本的には、記事の外枠いっぱいまで広がる感じです。
youtubeのタグを張り付ける親の要素の横幅まで広がる感じです。
ホームページ制作に限らず、ブログ記事を書いたりするときにグーグルマップや、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％にするのか？という事ですが、同じブログ記事でも、見る人の状況で変わりますよね？
ＰＣで見る人タブレットで見る人スマホで見る人スマホの横幅が大きい人スマホの横幅が狭い人スマホも横向きで見る人
共通点は、横幅が変わるという事で、それぞれの端末サイズに合わせて個別に横幅を固定して表示する事はほぼ不可能なんです。
だからこそ、固定の数字サイズではなく、割合という意味で％で表示してあげるんです。
具体的に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 専用のアプリみたいなのが起動するとおもうのですが、見ていくときに画像サイズがはみ出してしまって、スクロールするときに左右にフワフワ揺れたりする原因にもなったりします。
そういう不具合も、これで解決です。
参考になれば幸いです。
ではまた。
