WordPressでWistiaの動画の埋め込みが崩れてしまった場合の対処方法

WordPressで作成したサイトに動画の埋め込みをされている方は多いと思います。動画サービスの一番人気はYouTubeですが、YouTubeは無料で使える分、ビジネス利用では不都合な点も多くあります。

・動画を飛ばし見されてしまう
・LPからYouTubeに離脱されてしまう
・おすすめ動画が表示されてしまう

こういった問題が解決できる動画サービスはいくつかありますが、中でもマーケティングに活用するならおすすめなのがWistiaです。

動画マーケティングの理想的なプラットフォーム、Wistia

Wisitiaは動画をアップして管理するだけでなく、様々な機能を搭載しています。

カスタマイズ機能

デザインだけでなく、コントロールバーのカスタマイズによって、プレイバー（動画を好きな場所で再生できる）の削除や再生速度、音量の操作を不可にしたり、細かい調整が可能です。

動画編集機能

PCに向かって撮影をした動画を、Wistiaで編集ができます。撮影⇒編集⇒アップロードまで一つのサービス内でできてしまうのはすごいですよね。

データ分析

動画の再生数だけでなく、平均でどの程度の時間再生されているか、といった詳細な分析が可能です。

WordPressへの埋め込みで表示が崩れた場合の対処方法

そんな優れた動画マーケティングツールであるWistiaですが、WordPressに動画を埋め込んだ際に、表示が崩れる現象がありました。具体的には、スマホでLPを見た際に、上下に幅広の黒い帯が表示される、といったものでした。また、プレビューでは問題ないのに、実際のLPでは再生、音量などの全てのボタンが非表示になってしまう、という問題も発生しました。

現在は問題なく使用できていますので、同様なトラブルが起きた方のために、どのような対処をしたのかを書いておきます。

Wistia公式が掲載している対処法

まずは、Wistia公式のやり方です。以下のページに掲載されているものです。

⇒https://wistia.com/support/integrations/wordpress

より詳細な情報を知りたい方は、上記のリンクからページを参照ください。以下には、上記ページで提案されている方法の中で最もそれっぽい一つを紹介します。

・メディアを選択して、『埋め込む』をクリック

・『メディアを埋め込む』のメニューの下段にある、『高度な設定』をクリック

・『oEmbed URL を使用する』にチェックを入れる

・『コードをコピーする』をクリック

・コピーしたコードをWordPressの『埋め込み』を使って埋め込みます。

・このコードで上手く表示されなければ、『共有』をクリックし、そちらからコードをコピーします。

ここまでの作業で、改善する人も多いと思いますが、残念ながら僕は改善しませんでした。。

Wistiaの公式プラグイン『Wistia WordPress Plugin』を使用する

これはおそらく、上記の埋め込みの設定をせずとも、プラグインを入れるだけで問題が解決する、というものだと思います。

まずは、プラグイン⇒新規追加⇒『wistia』で検索。緑のやつがWistiaの公式のプラグインです。

残念ながら、『使用中の WordPress バージョンで未検証』と出ており、また、口コミが8件で★３つと低評価ということもあり、ちょっと不安もありました。。実際インストールして試してみましたが、僕の場合は特に何も変化は無かったため、すぐにプラグインは削除しました。
※プラグインのインストールは自己責任でお願いします。

プラグイン『EmbedPress』を使って埋め込む

Googleドキュメント、Vimeoなど、あらゆるメディアの埋め込みを一つのプラグインで快適にする、というプラグインを発見しました。それが、EmbedPress。外国の方のYouTube動画で紹介されていました。

EmbedPressの設定は特になかったと思います。気になる方はネット検索して調べてみてください。プラグインをインストールしたら、『ブロックを追加』⇒『すべて表示』をクリック。

ブロックメニューがすべて表示されるので、どんどんスクロールしていくと、EmbedPressの埋め込みが出てきます。

すると、Wistia専用の埋め込みブロックが表示されるので、そこに先ほどと同様に、埋め込み用のURLをコピーするか、共有リンクをコピーするかして埋め込んでみてください。

ここまでしても上手く行かなかった人、いますか？　実は、僕もここまでやったのに、スマホの表示（上下の分厚い黒帯）が直らず、どうしたもんかと途方に暮れていました。

ところが、ここまでやった後に、通常の『埋め込み』で共有のリンクを使って埋め込んでみたところ、あれ・・治ってる！？　黒帯の問題も、コントロールバーの表示の問題も全て解決していました。

キャッシュも消しながら再読み込みしつつ作業していたのですが、残念ながら、どれが決め手になったのかははっきりとわかりませんでした。。

僕の場合、『The Thor』というSEOに強いWordPressテーマを使用しているのですが、もしかするとテーマとの相性などもあるのかもしれません。現在は無事に使えているのでよいのですが、Wistia導入から使用できるまでに何時間もかかってしまいました。。

上記の３つを試せば、The Thor以外のテーマを使用している方でもどれかヒットするのではないかと思います。Wistiaは素晴らしい動画ツールですので、表示崩れでWistiaをあきらめる前に、是非上記３つの方法を試してみていただければと思います。試す順番は①から順で良いと思います。