[ 解決済 ] ホームページに挿入したmp4の動画の表示サイズを変えたい

[suisei98]

■ WordPress のバージョン
6.6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.27.1

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

■ 期待する動作
投稿ページに挿入したmp4の動画ですが、スマホなど、モバイルでは期待通りの表示になるのですが、パソコンでの表示サイズでは大きくなりぼやけてしまうため、表示サイズを小さくしたい。

■ 自分で試した事
現在は下記のように挿入しています。

<figure class=”wp-block-video”><video controlslist=”nodownload” oncontextmenu=”return false;” controls src=”https://minamiyama-seitai.com/wp-content/uploads/2024/11/005.mp4″></video></figure&gt;

上記ではモバイル表示では良いのですが、パソコンでは大きく表示され、ぼやけてしまいます。

コードの中に

＜iframe width=”560″ height=”315＞を以下のように入れてみましたが、基礎が分かっていないので、期待通りの表示ができません。
(数字はパソコンを見ながら大きさを決めたいと思っていますので、必ずしも560:315とは限りません)

<figure class=”wp-block-video”><video controlslist=”nodownload” oncontextmenu=”return false;” iframe width=”560″ height=”315 controls src=”https://minamiyama-seitai.com/wp-content/uploads/2024/11/005.mp4″></video></figure&gt;

■ 症状が発生するブラウザ
edge、クローム

■ 実際の症状
自分なりにコードを入れると、表示サイズが変わらなかったり、動画の個所が空白になったりします。

初心者なのでコードの基礎もよく分かっておりません。

よろしくご指導お願いいたします。

[瀬戸内ことり]

該当する動画をダウンロードしてみると、容量が12.8MB、サイズが640×480でした。

間違いなければ、パソコン表示がぼやけるのはそもそもの動画が小さいためではないかと。

パソコン表示で最大幅に制限をかけるには、コードを以下のように修正できると思います。

<figure class="wp-block-video" style="max-width: 640px; width: 100%; margin: auto;">
    <video controlslist="nodownload" oncontextmenu="return false;" controls src="https://minamiyama-seitai.com/wp-content/uploads/2024/11/005.mp4" style="width: 100%; height: auto;">
    </video>
</figure>

この他に、お伝えしたいことが３点あります。
一部、ご質問の内容とは違った角度からのご進言となりますが、目を通してみていただけるとうれしいです。

　
【１】どのようにして動画をお作りになっているのかは存じ上げませんが、幅を1280以上に設定されると画質はよくなると思います。

画質については既に以下のトピックで回答を得られていますね＾＾
mp4の動画を挿入する場合のサイズ等

※ ただし容量も大きくなるため、サーバーにアップロードするのはおすすめしません。

　
【２】動画は直接サーバーにアップロードするのでなく、YouTubeやVimeoにアップロードし、埋め込みブロックをお使いになるのがよろしいかと存じます。サーバー容量を圧迫することと、表示速度に影響を与えるおそれがあることが理由です。

※ 直接アップロードするなら、容量をぐっと抑える（圧縮をかける）必要があります。現状では重すぎるかなと。

　
【３】おまけです。
パソコン表示を気にされていますが、suisei98様の業種であれば、おそらく「お客様になってほしい対象」の方々は少なく見積もっても７割、多ければ９割以上がスマホでウェブサイトをご覧になっていると思います。パソコンでの見た目よりスマホでの見た目を重視されるのがおすすめです。

アナリティクス（アクセス解析）で見るとわかります。ぜひ一度、確認してみられてください。

[suisei98]

瀬戸内様

ご丁寧な返信ありがとうございます。

助かりました。試してみたいと思います。

[投稿者]

投稿