
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.comの「ブロックエディター」では動作しない。「旧エディター」では反映される。)
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
自分も利用しているのでまず問題ないと思うが、もし不安な場合は「VirusTotal」でウィルスチェックをするという方法もある。
(※「Virus」は日本語では「ウィルス」のこと。)
VirusTotal
色々なツールでウィルスチェックができるサイト。
参考:VirusTotal
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。