MetaSlider Pro（WordPress）に悩まされて
はじまり
社長に頼まれホームページのバナーにある動画を２つに追加しろとのこと。
とりあえず載せてみるか…と安易に考えていた。
パソコンでは見る事が出来た。なんだ簡単じゃないか。
そう思っていた時期が私にもありました。
な に こ れ
なんかスマホ版ではファイル形式がどうのサーバーエラーがどうのとかよくわからないことが書かれていた。
動画はMP4形式にしている。サーバーもPCで見れている為説明がつかない。
インターネットやX（Twitter）で検索をかけてもそれらしきものが見つからない。
…というよりMeta slider自体情報がねえ！！
その為、虱潰しに模索する羽目になった。
その前に
動画の入れ方を載せておきます。
１：MetaSliderを開き、『スライドを追加』を選択します。
２：『ファイルのアップロード』を選択し、『ファイルを選択』を押します。
３：アップロードした動画は『LocalVideo』より表示されます。
４：動画をクリックすると、右側に詳細が表示されます。
サムネイル（再生ボタンがある小さな画像）より、正しい動画が挿入されているかを確認します。
また、タイトルの内容は細かく、SEO（皆が検索しそうなワード）を意識した内容にしましょう。
その後、オレンジ色の『Add Slideshow』を押します。
５：『Show control』をオフにし、『Auto Play』をオンにします。
そうすることで動画を自動再生にできます。
また、『Link』より、クリックして飛ばしたいページに誘導する事が出来るので余裕があればしてみてください。
６：下へスクロールし、ショートコードをクリックします。すると、自動的にその文字をコピーできます。
その後必ず右上の保存を押しましょう。
７：Webサイトのホームページに戻り『固定ページを編集』を押します。
スクロールをして下に行くと、右側に『トップページ・スライダー』の項目があるので、『PC用スライダー』及び『スマホ用スライダー』にctrl + Vまたは
右クリックで貼り付けを行ってください。
８：ここで注意ですが、ホームページを確認する前に必ず『更新』を押してください。
不安な方は、何度押しても壊れることはないので、連打をしておきましょう。
9：ホームページに戻り確認しましょう。
お い ！ ！ ！ 真 っ 暗 じ ゃ ね え か ！ ！ ！ ！ ！ ！ ！
Google chromeをお使いの方は何故かバグで表示されない場合があるので、Micro EdgeやFirefoxなどで自社サイトを検索するとすぐに確認する事が出来ます。（SEO対策が出来てるか確認もできていいね☆）
一生懸命頑張りました。
さてさて、話を戻しましてここからは武勇伝的な書き込みです。
解決方法だけみたい 忙しい方は最後の解決したという欄を見てください。
個人で運営しているブログ。海外のサイト。英語で書かれたホームページ。XなどのSNSの書き込み。Youtube。
いやー、見つかんないっす。
探すだけ無駄な気がしてきたうえに時間がもったいないのでとりあえず動画ファイルの見直しやその他の方法を試した。
AEで編集したものをMP4で保存 →失敗
AEで編集したものをMOV（Quicktime）で保存 →失敗
時間を短縮して保存 →失敗
PremiereProで保存 →失敗
Media Encoderで保存 →失敗
正直だまくらかして話を無かったことにしたかった。ここまで来るとヤケになりましたとも。
皆出来てるのにどうして…そもそもバナーに動画二つも無理では？？
などと逃げの思考になっていました。
とりあえずFilmoreで音声つけてYoutubeにアップロードしておくかと思い動画を作成。
これもバナーに試してみるか？なんて思いながらとりあえずアップロード。
（※上記の動画はPC画面です）
見れるやん。Why？さっきまでの努力実ってますやん。
とりあえず訳が分からないので動画のプロパティを見直すことに
解決した（灯台下暗し）
| 元動画 | バナーに組み込めた動画 |
| 1920×1080 | 1920×1080 |
| 40秒音無し | 40秒音あり |
| 60fps | 30fps |
これは絶対音かフレームレートが原因やん
そして両者検証。結果は…。
フレームレートが原因でした。
どうやらMetaSliderProによるバナー動画は1980×1080、30fps、MP4 or MOV かつ１GB未満である必要がある。
でも容量は軽めの方がSEO的には良いそうです。
多分、ここまで一気にスクロールしてきた人がほとんどだと思います。
なので時間がある人は良かったら読んでください！！
そしてこの度、マジカルハート事業部公式X（Twitter）ができました！！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
良ければフォローお願いします！！