WordPressに埋め込んだYoutubeのサムネイルの表示がスマートホンでだけおかしくなった場合のひとつの対処法

Sponsored Link

いつの頃からか、スマートホン上でのこのブログに埋め込んだYoutubeのサムネイルの表示がおかしくなっていました。気がついてから、何ヶ月も放置してたけど・・・。

Youtubeサムネイル横長であるはずのサムネイルが、上下の黒い帯が太くなり、画像も中心部がトリミングされてほぼ正方形となり、不格好になるのですねー。
機能的には問題ないけど、やっぱり格好悪いのいやだなぁ。

パソコン上では問題なく、スマートホン上でだけ起きる症状。以前はちゃんと表示されてたんだけどね。

理由は特に心当りがないけれど、最近はCSSをいじることはしてないので、WordPressのメディアURL貼り付け機能(あるいはそれと他のプラグインとの干渉)の不具合のような気がしています。

そんな状況を打開する方法をWordPressにyoutubeやgoogle mapをレスポンシブに埋め込んでみた｜ウェブシュフさんで見つけてトライしたところ、うまくいきました！！

Sponsored Link

対策前と対策後

左が対策前で不格好。本来のサムネイルの中心にトリミングされてるし。
右が対策後。ほっそりと本来の形状でスマート。
YoutubeサムネイルYoutubeサムネイル

見事に望ましいサイズで表示されるようになりました。もちろん機能も正常に働く。

パソコン側の表示

これは微妙に変わりました。
対応前は表示の最大幅はコンテンツ部分の最大幅固定で(WordPressの機能というか仕様で)表示されていたけれど、完全にレスポンシブにサイズが変わるようになりました。

具体的にはその最大幅固定以上のサイズでも表示できるかぎり大きく表示してくれるようです。以前の表示のほうがいいんだけどこの辺のロジックは未解明・・・。

対応方法は

具体的にはWordPressにyoutubeやgoogle mapをレスポンシブに埋め込んでみた｜ウェブシュフで紹介されていた方法を参考にのほぼパクリです。すみませんすみません。

  1. embedresponsively.comにアクセス
  2. 対応させたいメディア(今回はYoutube)を選んで、「YouTube URL」の欄に貼り付けたいYoutubeのURLを入力して「embed」をクリック
  3. 「Embed code」に表示されたコードをそのまま自分のサイトの埋め込みたい箇所にコピペ

でOK。

embedresponsively.comの吐き出してくれるCSSが使い回し可能であることがポイント。
このコードを自分でいじる必要はまず必要ないと思う。

今回の自分の場合はこんな感じになった。

<style>
.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'><iframe src='http://www.youtube.com/embed/aIJh9hRq6kI' frameborder='50' allowfullscreen></iframe></div>

もっと使いやすく！と思ったので

ウェブシュフさんはkira-ismと同じくWordPressで動いているということでいろいろ参考になります。
今回はこのコードの入力を簡単にするためにCSSをstyle.cssに追記して、function.phpでコード入力用のボタンを作ったとのこと。
さすがやなー。

自分の場合は動画をアップする頻度が低いことと、すでにCSSがかなり肥大していること、あまり手を掛けたくないことから、このコードはそのままインラインで使うことにして、その入力を(すでに利用している)入力補助プラグインWordPress › AddQuicktag « WordPress Pluginsで入力するように・・・したかったのだけど、なぜかAddQuicktagで出力したコードが動作せず。
出力内容はオリジナルとまったく同じに見えるんだけど・・・。

仕方がないので、CSSはやはりstyle.cssに書いて、その他のタグの部分をAddQuicktagで吐き出すようにしてもダメ。
AddQuicktagを使わずに手でコピペしても動かない。

具体的にどうダメかというと、まったくサムネイルが表示されない、相当の大きさのブランクエリアはできるけれどクリッカブルにもならないという状況。

なんでこんな簡単なことができないかな。くやしい。きっと自分の操作の何かが原因のはず。
理由が分からないけど、いつか絶対突き止める・・・！

そのまま使えば効果はあるので

ということで、もう夜も遅いので不具合の原因追求は諦め、当面はembedresponsively.comの吐き出したコードをそのままコピペする運用にしようかと。

省力化はできなかったけれど、CSSをインラインで使うというそもそもの狙いの通りにはなっているのでこれでいいや。

根本的な改修には至っていないことはくやしいけれど、今日のところはここまでで終了。

追記

3月22日、ようやく上記のAddQuicktagを使った出力がうまくいかない問題が解決して、思った通りの設定ができました。

CSS部分はやはりstyle.cssに記述することにし、タグ部分はAddQuicktagでエディタに吐き出す方法にしました。
CSS部分もAddQuicktagでタグ部分と一緒に出力する方法は、やはりメンテナンス性を考えて止めました。

YoutubeからWordPressにコピペするURLは埋め込み用のiframeではなく、通常のURL(でも動作するけれど、https:を除いた部分のみの方が理想的)で、これにAddQuicktagでタグを補完する仕組みです。

共有用のiframeを取得する手間も省けるので、いいかなーと。

結果として、一番スマートかつ一番普通な解決方法ができたと思います。

でも、「こんなことしないでURLを貼り付けるだけでちゃんとレスポンシブに動いてほしいな」というのがそもそもの願いですね。
なんとか自分でWordPressかJetPackのソースを弄って改修したいのだけど・・・。

なお、当初にうまく動作させられなかった理由は不明なままです w

embedresponsively.comはYoutube以外にもVimeo、Dailymotion、Google Maps、Instagram、Vine、Generic iFrameに対応しているので、同じような症状の方、お試しあれ。

Sponsored Link
kira-ism.com

コメントを残す