【WordPress】表の中にYouTube動画を埋め込んだ時に横幅が広がって崩れた時の対処法

最近は、いつもこの問題で困っていて、色々と試行錯誤をした結果、一応無理矢理ではありますが解決したので、備忘録として残しておきます。

表にYouTubeを埋め込む

ボクはよくクーポンを紹介する時に、表にYouTube動画を埋め込んでいました。

例:【GearBest・クーポン速報】Xiaomi Airの12が驚きの!53745円だぞ!いそげ~~~!

すると何故か、YouTube動画を埋め込んだ場合のみ、横幅が600pxくらいまで伸びてしまい、スマホの画面外に情報が行ってしまう現象が発生していました。

▼上のクーポン情報ページをスマホで見ると、こんな感じで飛び出てしまい、見れない。

Screenshot_2017-05-18-16-02-40-072_com.devhd.feedly

 

YouTubeをそのまま貼り付けるのではなく、動画リンクとして貼ることで、ジャンプした先で見えるようにもしてみたんですが、見る方としてはそ場のページで見れたほうが楽ですよね。

例: 動画リンク

そして、なぜかFeedlyではYouTube動画が直接張ってあれば、問題なく見れるのに、YouTubeページにジャンプして見れるようにすると、いつまでもジャンプしない=見れないという現象が発生してしまいました。

これでは、Feedlyでブログを見てい頂いている人はすごい見づらいです。

一応、動画リンクの場合はChromeなどの普通のブラウザに飛べば見れるんですが面倒です。

逆に、表からはみ出ている状態では、Chromeに飛んで見てもはみ出たままなので、PCでしか見れないということになっていました。

▼横画面にしてもまだはみ出ている。

Screenshot_2017-05-18-16-02-53-670_com.devhd.feedly

 

▼Chromeにしてもはみ出ている\(^o^)/

Screenshot_2017-05-18-16-03-14-169_com.android.chrome

 

対処法

Googleで色々検索しても全く出てきませんでしたので、色々と弄ってなんとか解決法を見つけました。

WordPressの大半のテンプレートではYouTubeのURLを貼り付けるだけでYouTubeの動画が表示されるようになります。

しかし、その機能は使わずに、メニューにある、動画貼り付けアイコンをクリックします。

2017-5-18_16-0-39

 

次に、ソースにYouTube動画URLを貼り付けて、サイズを300にします。

2017-5-18_16-16-46

 

埋め込むタブに移動して、allowfullscreen=”allowfullscreen”の記述を消します。

2017-5-18_16-16-56

 

消すとこんな感じ。これで完了です。

2017-5-18_16-17-5

 

▼対処前(スマホで見るとはみ出ます。)

あいうえお カキクケコ さしすせそ

 

▼対処後(スマホで見てもはみ出ません。)というか、横幅300にしたのに300になっていません。ボクのブログテーマは横幅指定が無効になっているみたいです。

あいうえお カキクケコ さしすせそ

 

 

allowfullscreenとは?

動画をフルスクリーンモードにするかどうかを選択できる様になります。

これを消すことで、フルスクリーンモードにできなくなります。

これが唯一の弊害です。

 

 

まとめ

スマホでレイアウトが崩れてコンテンツが見れなくなるよりは、フルスクリーンに出来ないほうがまだましです。

もうひとつのボクのブログではallowfullscreenがある状態でも、きちんとレイアウトが崩れないで表示されました。

おそらくボクのブログテーマが何かYouTube動画に足して、適切に対処されていないのかもしれません。

そう言えば、ボクの使っているテーマはHemingwayというのですが、全然アップデートがされていません。

もしかするとそうも原因なのかもしれません。

ブログテーマをいじれるくらい知識がないので、テーマを変えるというのはすごい決断力がいるものなので、変えることは出来ませんが、いつかは変えたいと思っています。

簡単でもいいので、自分で作れるくらいの知識がほしいなぁ。

 

コメント