理央こんにちは！理央（@leo__note）です！
メインビジュアルの動画が再生どころか表示すらできなかったので、その解決策を備忘録として残しておきます。
メインビジュアルとは
WordPressのテーマSWELL
が使いやすくて、このサイトも含めこれまで4サイト作ってきました。そのSWELLでは、トップページにアクセスしたとき、メインビジュアルと呼ばれる一番目立つところに大きな画像を設定することができます。
こちらを設定することで、ユーザーに一番見てもらいたいものを伝えられる便利な機能なので、コーポレートサイトには必ずと言っていいほどよく見られます。
理央このサイトはブログがメインなので、メインビジュアルは設定していませんが、他で作ったコーポレートサイトには設定しています
このメインビジュアルで登録できるものの種類は画像と動画。画像は1枚から5枚登録できて、2枚以上登録すると自動的にスライドショーになります。
ただし動画は１つだけしか登録できません。例えば、1枚目を動画、2枚目を画像といったスライドショーは作れません。
ことの発端
動画を作っていなかったので、メインビジュアルは画像しか使ってこなかったのがこれまで。
ただ今回サイトのPRのため動画を作ったので、そちらをメインビジュアルで表示させて訴求力を高めようと思い、メインビジュアルに動画を登録しました。
しかし！
何度、登録しても表示がされません。
同じ動画でもWordPressの機能にある「カバー」に設定したらちゃんと表示される、でもメインビジュアルに持っていくと表示されない。
「SWELL 動画 再生されない」「SWELL メインビジュアル 動画 表示されない」など考えられる解決策をGoogleで検索して、出てきたサイトの方法を試してみてもダメでした。
例えば
- キャッシュを消す
- プラグインを止める
- SSL化が正常に完了できているかをご確認
など、どれもピンとこず。そもそもカバーで使えるので、何でメインビジュアルで使えないのか分からず悩んでいました。
動画の表示ができた！その解決策とは
そこで、もしかするとこれ拡張子じゃないか？と考えました。
というのも僕はm4vという拡張子で動画を作っていたのですが、SWELLの公式サイトのメインビジュアルを調べていると制作者の了さんの動画はmp4で作られているではないですか。
まさかこれ？と思い、ダメもとで同じ動画をmp4で書き出してメインビジュアルの動画に設定し直したらこれが正解でした。
なので、もしメインビジュアルで動画が表示できなくて困っている方は拡張子を疑ったら解決するかもしれません。
お恥ずかしながら、動画は詳しくないので今回の動画ファイル形式を気にせず書き出しをしたのがm4vでした。調べてみるとこのm4vはApple社が作ったもので、Apple製品には互換性はあるもののmp4に比べるとその他の互換性が高くないようです。そのためこれからはmp4で書き出した方が良いということを学びました。
ファイル形式を変えることでファイルサイズが大きくなることもあります。僕の場合、mp4にするとファイルが大きくなりWordPressにアップロードするときにエラーが出ました。
そういう時はサーバーの「php.ini」に設定されているサイズを変える必要があります。
僕は余裕を持ってこのように設定しています。
memory_limit = 256M
post_max_size = 120M
upload_max_filesize = 100M
一番下のupload_max_filesizeがアップロードサイズの上限です。最初は32Mでしたが、これで100MまでのファイルをWordPressでアップロードできるようになりました。
