【WordPress】YouTubeショート動画の埋め込みがでかすぎる!小さくする方法

この記事では、WordPressのブロックエディターにYouTubeのショート動画リンクを埋め込んだ時、高さが高すぎて見えにくい時の対処法を書きます。
埋め込んだショート動画のブロックを選択→「より小さな端末用にリサイズ」をオフにします。
WordPress(使っているテーマはLuxeritas)のブロックエディターで、僕自身がアップロードしたYouTubeのショート動画を埋め込むと、超でかくて見にくかったです。

使っているPCモニターの一画面に収まっておらず、Ctrl+マウスホイール回転でブラウザのページ倍率を相当縮小してようやく全体像が表示されました。

実際にこちらに飛んでいただくと分かるかと思います。見にくいったらありゃしません。
子テーマの編集(style.css)に、埋め込んだショート動画の高さを制限するCSSを書き込む方法もありますが、本記事ではそういった難しい方法は使わず、埋め込んだその動画だけを対象としてサクッと小さくする方法を紹介します。
あくまでそのショート動画のみ対象なので、別のショート動画を埋め込んだ時に都度設定が必要な点、読者の環境(モニターやスマホなど)によってはあんまり効果を得られないかもしれない点、過去埋め込んだショート動画一括変更するといった万能なものではない点など、デメリットもあります。
WordPressのショート動画埋め込みを小さくする手順
YouTubeのショート動画をWordPressのブロックエディターの記事編集画面に埋め込みます。リンクを貼ると自動的に埋め込み扱いになると思います。
埋め込んだショート動画を選択すると、自動的に右側サイドバーにブロック設定パネルが表示されます。
この中の「メディア設定」→「より小さな端末用にリサイズ」をオフにします。デフォルトだとオンになっていると思います。

僕の環境だと、オンになっているとくそでかショート動画になりました。オフにすることで、下記画像のようにぎゅっと縦横比を維持したまま小さくなってくれました。

細かく高さ調整したいといった場合は、冒頭にも書いたように子テーマの編集にCSSを書き込む方法が必要になってきますが、僕は上記で満足したので特にいじっていません。
そういうの知りたい方は別の方の記事を検索してみましょう。多分紹介されている方いそうです。
もしかしたら本来の目的とは違う使い方なので、思わぬ不具合が起きている可能性もあります。(こうなってほしくないのにこういうUIになる…とか)
サンプル
デフォルト状態
「より小さな端末用にリサイズ」をオフにした状態
感想
以上、WordPressのブロックエディターにYouTubeのショート動画リンクを埋め込んだ時、高さが高すぎて見えにくい時の対処法でした。








ディスカッション
コメント一覧
まだ、コメントがありません