YouTube動画の表示サイズを縮小してブログ記事に入れる方法

WordPressの記事にYouTubeの動画を入れる場合、動画の表示サイズが大きすぎて、スマホでの表示がモバイルフレンドリーにならない場合があります。

これはテーマなどのデザインの関係で、レスポンシブWebデザインなどになっている場合、スマホの小さい画面でも、そのまま表示サイズで動画が再生できるようになっているためです。

記事の公開上としては、それでも問題はないのですが、他の画像(写真類)は、スマホ画面サイズになっているのに、動画だけが大きなサイズになっていると言う現象となります。
この場合は、検索エンジンがモバイルフレンドリーではないと考えてしまう可能性も捨てきれないので、可能であれば、動画の表示サイズもスマホ画面で表示されるケースを最初から想定して記事中に入れると良い訳です。

もともとの動画のサイズを縮小してくださいと言う訳ではなく、単に記事にて表示される最初のサイズ(動画の縦横の大きさ)を変更して記事に入れると言う事になります。
パソコンの大きな画面では、動画が小さく見えますが、今やアクセスの60%程度はスマホからですので、スマホを重視した表示にしておくのは、悪い事ではありません。

下記の方法は私が取っている方法ですので、必ずこの方が良いと言う事ではないのですが、ひとつの方法としてご紹介致します。

(1)記事に入れたいユーチューブの動画へ直接アクセスします。(YouTube側の画面です。)

(2)その動画にある「共有」の部分をクリックすると、その直下に表示される「埋め込みコード」に進みます。

(3)そのまま埋め込みコードを入れると元のサイズのため、コードをコピーする前に、サイズ変更するため「もっと見る」をクリックします。

(4)新たに表示された項目にある「動画のサイズ」より「カスタムサイズ」を選択して、表示したいサイズを指定します。

　私の場合には、だいたい、横300ピクセルにしています。最初の枠に「300」と入力すると、右横の数値は自動で計算されますので、左側の横ピクセルだけ指定すればOKです。
　300と言う数値は、ご自身で表示したいサイズにして頂いて構いませんので、300に拘る必要はありません。
　5インチ画面でしたら、320位でも大丈夫かと存じますが、小さなスマホ画面だと320は、はみ出るかも知れません。

　スマホでも問題ないようにするためには、300×169ピクセル・サイズが最適です。

　下記は見本ですが、パソコンでクリックすると拡大致します。

(5)その数値を指定すると「埋め込みコード」の部分のwidth(横の幅)の数値も、300など指定した数値に変わっていると存じます。

　この横幅を変えたあとに「埋め込みコード」をコピーしてください。

(6)コピーした「埋め込みコード」を、WordPressの記事編集の「テキスト状態」にて、ペースト(張り付け)すればOKです。

　あとは記事の保存(更新)を行ってください。

　もちろん、記事を作った後には、スマホでも問題がないか、慣れないうちは確認しておくと良いです。

なお、上記の動画のサイズを縮小なり、拡大なり、自由に大きさを変えて入れる方法は、WordPress以外のブログなどでも応用できますので、付け加えておきます。
また、仕様が変わることもありますので、その際にはご容赦願います。