WordPressで動画が再生されない!ときの対処。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

WordPressで動画が再生されない!ときの対処。

WodrPressで動画を。

WordPressで動画が再生されない!ときの対処。

WordPressで動画を埋め込みたい。

WordPressショートコードの[ video ]〜[ /video ]。

WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。

ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[ /video ]のショートコードが記述がされる。

[ video ]と[ /video ]の部分は、ショートコードが動作しないように半角スペースを入れている。実際には半角スペースは入らない。)

例えば、、、

[ video width="960" height="540" mp4="https://igawa.co/wp-content/uploads/2022/08/cat.mp4" ][ /video ]

となるが、このショートコードでは自動再生ができない。また、デフォルトで意図しないコントローラーも出てくる。

WordPressショートコードを使わない方法。

<video src="xxxxx" autoplay="" muted="" playsinline="" loop preload="none"></video>

この記述であれば、ショートコードを使わないWebスタンダードな書き方なので、オリジナルテーマ、フリーテーマなどに関係なく、動画が反映がされる。

実装の際は、xxxxxの箇所に、動画のパスとファイル名を入れると良い。(〜/cat.mp4など)。


WordPressへの動画埋め込みの実装例。

ショートコードの場合。

[ video width="960" height="540" mp4="https://igawa.co/wp-content/uploads/2022/08/cat.mp4" ][ /video ]

[ video ]と[ /video ]の部分は、ショートコードが動作しないように半角スペースを入れている。)

ショートコードなしのプレーンなHTMLの場合。

<video src="xxxxx" autoplay="" muted="" playsinline="" loop preload="none"></video>

WordPressのショートコードは非常に便利で、当サイトでもよく使っているが、videoの時だけはちょっと使いにくい。

(ただし無料で使えるWordPressに不満があるということでは決してなく、むしろ感謝の方が遥かに大きい。)


動画圧縮サイトとウィルスチェックサイト。

また、WordPressやサーバーにはファイルのアップロード制限(5MBなど)があるので、例えば5MB以上の動画の場合はファイルを圧縮し、5MB未満にする必要がある。

動画編集ソフトを使う技術や時間がないという場合は、オンラインでも登録不要かつ無料で利用できるサイトがいくつかある。
サイトによってはファイルの出力サイズも調整できるのでとても便利だ。(下記参照)

Compress Video Online

参考:オンラインでビデオを圧縮-無料で安全なビデオ圧縮ツール

Media.io

参考:無料&無劣化で動画圧縮 | Media.io

自分も利用しているのでまず問題ないと思うが、もし不安な場合は「VirusTotal」でウィルスチェックをするという方法もある。

(※「Virus」は日本語では「ウィルス」のこと。)

VirusTotal

参考:VirusTotal

WordPressに動画を。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。