ワードプレスに埋め込んだYouTube動画がスマホ表示ではみ出る時の対処法

この記事は5分で読めます

こんにちは、カズーイです。

 

ココ数年、スマホからのアクセスが一気に増えてきて、

もはやレスポンシブウェブデザインなどで、

スマホ対応するのは当たり前になっています。

 

しかし、そこで1つ問題なのが、

YouTubeなどの動画を埋め込んだ場合です。

 

 

例えばワードプレスだと、

レスポンシブウェブデザイン適応のテンプレートを使用すれば、

簡単にスマホに対応することは出来ますが、

YouTubeはそのままなので思いっきりはみ出るんですよ。

 

(※予め動画もスマホ対応している場合もあります)

 

こんな感じで↓

イチロー

 

こちらは僕のiPhone画面のスクリーンショットを撮影したものなんですが、

見えにくいと思いますが動画が枠から大きくはみ出てますよね。

 

予め動画に対応してあるテンプレートもあるんですが、

一般的にはこのようにはみ出してしまうケースが多いようです。

 

そこで今回はワードプレスに埋め込んだYouTubeを、

スマホ対応させる方法をお話しようと思います。

 

 

というのも最近ウェブマスターツールを使っていると、

あるメッセージが届くことがあるのです。

 

他のサイト運営者も送られてきた人は多いみたいで、

どうやら最近Googleが導入したアルゴリズムに引っかかってるみたいなんですが、

こんな感じのメッセージが送られてきました↓

 

モバイルユーザビリティ

 

モバイルユーザビリティとなっていますが、

要するに「携帯(スマホ)で見にくいから改善してね~」ってメッセージです。

 

 

今回この通知が来たサイトって、

作ったばっかで僅か2記事しか入れていないので、

引っかかる理由がほぼ無いんですよ。

 

テンプレートもレスポンシブ適応しててスマホ対策はバッチリです。

 

あと考えられる理由としては、

2記事とも動画を埋め込んであるのでそこしかありません。

 

 

そこで今回、埋め込んだ動画を、

簡単にスマホ対応にする方法を書こうと思ったわけです。

 

 

方法は幾つかあります。

 

1つはHTML、CSSを直接イジる方法。

 

ただし、このやり方はタグ打ちが出来ないとダメだし、

今使用しているテンプレートを変更する時などで、

また1からイジる必要が出てくるのでおすすめしません。

 

と、思っていたのですが、

調べてみたところタグ入力が1番簡単でした。

 

 

iframe{ max-width:100%; }

 

というCSSタグを貼り付ければ、

何とかスペース内には収まってくれます。

 

ちょっと動画の形が崩れちゃうんですが1番ラクな方法はこれです。

 

 

他にも予め動画の埋め込みに対応したテンプレートを使用するか、

プラグインを導入するという方法があります。

 

 

テンプレート選びで解決する場合、

ルレアに付属しているリファインは埋め込みに対応しています。

 

賢威も半対応といった感じで、

「<div class=”v-wrap”>ここに動画タグを入れる</div>

というタグで動画タグを囲むことでスマホの幅に合うようになるみたいです。

 

 

ちなみに僕が現在使用しているSINKAは対応していないっぽいので、

プラグインに頼るか、先ほど紹介したタグを打ち込むしかないですね。

 

まぁ幸いSINKAには、

「テーマオプション」→「自由入力欄の設定」と辿っていけば、

「ユーザー定義CSS」というCSSタグを入れる欄があるので、

簡単に済ませたいなら、そこにさっきのタグを入力しましょう。

 

 

もう少し拘りたい場合はプラグインしかないですね。

 

「Advanced Responsive Video Embedder」

というプラグインを使用すれば幅など調節できるみたいなので、

コピペしてプラグインを検索してみて下さい。

 

 

導入したら「設定」に「A.R.Video Embedder」という項目が追加されているはずなので、

それをクリックして初期設定をしていきましょう。

 

A.R.Video Embedder

 

こんな感じで下にもズラッと項目が並んでいるはずですが、

取り敢えずは上の画像部分の設定だけで十分です。

 

では順番に説明していきましょう。

 

 

Default Mode:ここはNormalを選択しておけば大丈夫です。

 

Video Maximal Width:ビデオの幅を設定できます。450~560くらいが良いと思います。

 

Aligned Maximal Width (Normal Mode):そのまま変更しなくて大丈夫です。

 

Thumbnail Maximal Width:Default ModeでThumbnailを選んだときのサムネイル画面の幅です。

ここもそのままでOK。

 

Fake Thumbnails:チェックを入れたままで大丈夫です。

 

Custom Thumbnail Image:空白のままで大丈夫です。

 

Autoplay all:チェックを入れると自動再生されます。

自動再生は訪問者にとって迷惑なのでチェックは入れない方が良いでしょう。

 

 

これで後は「変更を保存」をクリックすれば初期設定は完了です。

 

続いて動画を埋め込む時の設定について説明します。

 

 

ワードプレスの記事投稿画面を開くと、

 

WS000008

 

 

こんな感じで「Embed Video」というボタンが追加されているはずなので、

動画を埋め込んだらクリックして下さい。

 

するとこのような画面が開くはずです↓

WS000009

 

あとはここの設定を済ませれば完了です。

 

 

URL/Embed Code:埋め込む動画のHTMLタグかURLを入力します。

 

Mode:Normal、Thumbnail、Eazy loadという選択肢がありますが、Normalで良いです。

 

Align:ビデオをどこに配置するか選びます。左寄せ、中央、右寄せという意味です。

 

Autoplay:ビデオの自動再生です。迷惑なのでチェックを外しましょう。

 

Maximal width:動画の最大幅を指定します。

 

 

設定を済ませたら「Insert Shortcode」をクリックして完了です。

 

 

ということで、ここまで読んで頂ければ、

プラグインを使用した場合どれだけ面倒がよく分かったと思います。

 

ですので余程の理由が無い限りは、

タグ入力かテンプレート選択で解決した方が良いでしょう。

 

スマホ上での表示が多少汚くても、

スマホで動画を再生するときは別画面に切り替わるので問題ありませんしね。

 

 

ではでは参考にして頑張ってください。

 

 

 

PS.

 

ちなみにウェブマスターツールの警告は、

そんなに気にする必要は無いみたいです。

 

PCサイトとスマホサイトの切り替えには、

レスポンシブ以外にも色々方法があるので、

それにGoogleが完全対応できていないだけらしいので。

 

 

PCとスマホに対応した画面が表示されるなら、

放っておいても問題ないと思います。

 

 

ただ、まだスマホに対応できていない場合は、

アクセスの取りこぼしを減らすためにも即座に調整しましょう。

 

このブログも今はPCよりスマホの方がアクセスが多いくらいなので、

この時代にスマホ対応していないのはマズイですよ。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

管理人:カズーイ


こんにちは。カズーイと申します。

僕はコミュ障、ニート、父の死、借金、叔父の脅迫、夜逃げと、壮絶な人生を歩んできました。

しかし、現在はパソコン1台で月100万円以上を稼いで自由な人生を送っています。

どん底からたった6ヶ月で成功できた秘密は下記からご覧下さい。
プロフィールはこちら

実績画像はこちら
※2016年6月メール1通で200万円達成


いつもクリックありがとうございます。
カズーイの順位はこちらからチェック↓

人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • LINEで送る

ビジネスを成功へ導く知識を詰め込んだクラウドサービス「Success Cloud」


ダウンロード数1000人突破。

メルマガにご登録頂けると、動画本数111本、総再生時間1100分以上、総文字数20万字以上で構成された業界初のクラウドサービス「Success Cloud」をお渡ししています。

数百万円以上かけて学んだ思考やノウハウを1つに凝縮するために3ヶ月かけて作成しました。

全てのコンテンツがネット上にあるため、PCからでもスマホからでも見たい時にいつでも好きなだけ学んで頂けます。

メルマガ登録は無料、必要ないと感じれば本文内の解除URLからいつでも解除できます。