広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

WordPress

「WordPress」のアイコン画像

この記事では、WordPressのブロックエディターにYouTubeのショート動画リンクを埋め込んだ時、高さが高すぎて見えにくい時の対処法を書きます。

埋め込んだショート動画のブロックを選択→「より小さな端末用にリサイズ」をオフにします。

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

WordPressワードプレス(使っているテーマはLuxeritasルクセリタス)のブロックエディターで、僕自身がアップロードしたYouTubeのショート動画を埋め込むと、超でかくて見にくかったです。

WordPressのブロックエディターに埋め込んだショート動画が大きすぎる画像

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

WordPressブログのページ倍率を変更したPCブラウザ画像

実際にこちらに飛んでいただくと分かるかと思います。見にくいったらありゃしません。

子テーマの編集(style.css)に、埋め込んだショート動画の高さを制限するCSSを書き込む方法もありますが、本記事ではそういった難しい方法は使わず、埋め込んだその動画だけを対象としてサクッと小さくする方法を紹介します。

あくまでそのショート動画のみ対象なので、別のショート動画を埋め込んだ時に都度設定が必要な点、読者の環境(モニターやスマホなど)によってはあんまり効果を得られないかもしれない点、過去埋め込んだショート動画一括変更するといった万能なものではない点など、デメリットもあります。

WordPressのショート動画埋め込みを小さくする手順

YouTubeのショート動画をWordPressのブロックエディターの記事編集画面に埋め込みます。リンクを貼ると自動的に埋め込み扱いになると思います。

埋め込んだショート動画を選択すると、自動的に右側サイドバーにブロック設定パネルが表示されます。

この中の「メディア設定」→「より小さな端末用にリサイズ」をオフにします。デフォルトだとオンになっていると思います。

WordPressに埋め込んだショート動画の「より小さな端末用にリサイズ」をオフにする手順画像

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

WordPressに埋め込んだショート動画の「より小さな端末用にリサイズ」をオフにして小さくした画像

細かく高さ調整したいといった場合は、冒頭にも書いたように子テーマの編集にCSSを書き込む方法が必要になってきますが、僕は上記で満足したので特にいじっていません。

そういうの知りたい方は別の方の記事を検索してみましょう。多分紹介されている方いそうです。

もしかしたら本来の目的とは違う使い方なので、思わぬ不具合が起きている可能性もあります。(こうなってほしくないのにこういうUIになる…とか)

サンプル

デフォルト状態

「より小さな端末用にリサイズ」をオフにした状態

感想

以上、WordPressのブロックエディターにYouTubeのショート動画リンクを埋め込んだ時、高さが高すぎて見えにくい時の対処法でした。

WordPress

Posted by ナポリタン寿司