ブログに埋め込んだYouTube動画をiPhoneで見ると、はみ出してしまう場合の対処法

講師の紹介ページにYouTube動画を埋め込んでいるのですが、iPhoneで見た時に画面からはみ出してしまうため、その対策方法を調べてみました。

 

この現象は、パソコンの画面で見た時には特に気にならないのですが、iPhoneで見ると以下のようにスマホの画面からはみ出してしまっています。

iphone画面トラブル対処法1

 

iPhoneを横向きにすると、右側のエリアにスキマが出来てしまいます。

iphone画面トラブル対処法2

 

hanasoのホームページをiPhoneで見てみると、以下のように画面ぴったしで表示されています。

iphone画面トラブル対処法3

 

横向きで見ても問題ありません。

iphone画面トラブル対処法4

 

そこでネット上でいろいろ調べていたら、私が現在使っている「Xeory BASE」というWordPressテーマは、上記の不具合に対応していないとの記述を見つけました。

 

その対処法としては、WordPressのスタイルシートに以下の赤枠内の記述を追加するという事だったので、早速実行してみました。

 

*記述するソースは、以下の情報元ページを参照してください)

(情報元)YouTubeの埋め込み動画をレスポンシブ対応にするには

 

iphone画面トラブル対処法5

 

更に記事内にあるYouTube動画の埋め込みタグを以下のタグで囲みます。

 

<div class=”movie-wrap”>YouTube動画の埋め込みタグ</div>

 

すると、以下のように正常に表示されるようになりました。

iphone画面トラブル対処法6

 

横向きの場合もOKでした。

iphone画面トラブル対処法7

 

今回の問題はこれで解決しましたが、WordPressの場合は時々バージョンアップが自動的に実施されますよね?

 

この時に元に戻ってしまいそうでちょっと不安なのですが、とりあえず今回はここまでにしておきたいと思います。

 

*2018年8月18日時点でのWordPressのバージョン:4.9.8–ja

 

SNSでもご購読できます。

コメントを残す

*