WordPressのembed機能だとYoutubeの動画サムネイルが切れる問題

投稿者: | 2018-03-20

WordPressのembed機能を使ってYoutubeを貼ると、モバイルで表示したとき、サムネイル画面が切れてしまいます。
リンクをクリックして再生すれば普通に再生できますが、サムネイルが切れてしまっているので、どんな動画なのかわかりにくい状態です。

試したこと1:モバイルのURLを貼ってみる

通常は、
www.youtube
で、モバイルのURLは、
m.youtube
なので、それを貼ってみたのですが、表示は変わらずダメでした。
たぶん、サーバが読みに行っているからかなーって。

試したこと2:_Youtubeの埋め込み(iFrame)を使う

こちらはうまくいきました。
iFrameについては、
WordPressの安全性を保つ埋め込み機能「oEmbed」の仕組みとは? – WPJ
というのもあるので、うーんと思うところもあるのですが、モバイルからの流入がかなりの部分を占めるので、モバイルで見た方が使いづらいサイトというのはやっぱり微妙なのかなと思っています。
今は、気がついた動画からiFarameに切り替えしています。

考えたこと1:サムネイルを引っ張ってくる

iFarmeを使わず、サムネイルを引っ張ってきて、動画へのリンクにする方法もちょっと考えました。
ただ、この方法だと、再生ボタンが表示されないんですよね。
で、再生ボタンを別途設定するか、画像をダウンロードして、そこに載せてアップし直すかみたいなことを考えたのですが、ちょっと大変そうなので止めました。
Javascriptで再生ボタンを載せるのはありなのですが、そもそもYoutubeの動画のサムネイルというのを判別させて、それだけにボタンを載せて、レスポンシブルにも対応させて、Wordpressのテーマが変わっても大丈夫にするとなると、かなり工数が掛かりそうだなーと。
再生ボタンなしであれば、大変ではないのですが、やっぱり画像をタップするってボタンがないとしづらいかなーって思ったりしました。