【PR】月10万前後稼ぐ商標1位のペラサイト公開

公開日:2016年3月9日 ⇒最終更新日:2016年11月8日

WordPressに埋め込んだYouTube動画の幅がスマホで自動調節される方法

Pocket


wp youtube2 WordPressに埋め込んだYouTube動画の幅がスマホで自動調節される方法

ワードプレスに動画を「そのままのサイズで」埋め込みたいけど、
スマホ(iPhoneやAndroid)で閲覧してみると
画面の横幅からハミ出してしまうのがイヤ!

 

この記事では、ワードプレスに
ちょっとしたHTMLコードを加えるだけでこの問題を解決できる方法をお伝えします。

 

解決策

wp youtube haba WordPressに埋め込んだYouTube動画の幅がスマホで自動調節される方法

※上記画像はクリックで拡大できます。

※こちらのWPテンプレートは「RefinePro」というものですが、どのテンプレートでも同じ解決策になります。

 

画像のように、「外観」⇒「テーマ編集」⇒「custom.php」を選択します。

「custom.php」に次のコードをコピペしてください。

 

 

次に、記事の中でYouTube動画を埋め込む時、テキストエディタにて
動画の埋め込みコードを下記のコードで挟むようにしてください。

 

 

つまり

<div class=”video-container”>
<iframe width=”500″ height=”281″ src=”https://www.youtube.com/embed/yDjrPwZS500?rel=0″ frameborder=”0″ allowfullscreen></iframe>
</div>

 

という感じになっていればOK、ということです(↑↑これはビジュアルエディタで書いているので、必ず先ほどのコードからコピーしてあなたのWPの記事編集顔面のテキストエディタで貼り付けおよび埋め込み動画のコードを貼り付けるようにしてください)。

 

※一々divタブで囲むのが面倒という方はプラグイン
 「AddQuicktag」を使うとより効率的です。

 

上記の操作を実行すると、下記のように、
スマホ画面の枠の中にYouTube動画が収まるよう自動調節されます↓↓

 

wp youtube3 WordPressに埋め込んだYouTube動画の幅がスマホで自動調節される方法

 

icon arrow1 r WordPressに埋め込んだYouTube動画の幅がスマホで自動調節される方法関連記事:WordPressにYouTubeの埋め込みタグを入れたら消える問題の解決方法

 

ぜひ参考にしてみてくださいね!

Pocket


【PR】『SEO作業会』リリースしました

コレだ!という1本の柱をつくりたいあなたへ

4件のコメント

  • マナ

    はじめまして
    突然申し訳ありません
    こちらのやり方を試させていただきましたが、nagaiさんと同じく500エラーが起きております…

    もとに戻す方法としてはFFFTPSで、custom.phpを元に戻すという方法が正しいのでしょうか?

    このようなトラブルは初めてであり、FFFTPSを使ったこともないため大変焦っております…

    お返事いただけましたら幸いです。

    • みやえら

      マナさん、初めまして。

      custom.phpを元に戻してみてください。

      もしかしたら、私の観測範囲外で、ワードプレスのテーマとの相性があるのかもしれませんね。

      お手間をかけてしまい申し訳ありませんが、元に戻してみていただけますでしょうか。

  • nagai

    はじめまして。大至急助けて頂きたいです・・・。
    会社のウェブサイトを担当しているものです。

    ワードプレスで動画を入れたのですが、携帯ですと。はみ出すので
    こちら様のサイトに記載されているコードをコピーしたのですが、そのとたんにサイトがみられなくなってしまいました。
    会社では私以外にウェブをするものがおらず、途方にくれております。もとに戻す方法をおしえていただくことはできますでしょうか?
    お忙しいところ申し訳ございませんがどうかよろしくお願いいたします。
    出たエラーメッセージは、下記です。

    Parse error: syntax error, unexpected ‘.’ in /export/sd213/www/jp/r/e/gmoserver/0/5/sd0876305/astro-gemini.com/wordpress-4.7.3-ja-jetpack_webfont-undernavicontrol/wp-content/themes/rokophoto-lite/inc/customizer.php on line 57

    • みやえら

      nagai様

      初めまして、みやえらと申します。

      私の記事のやり方でエラーが出たとのことで、
      ご迷惑をおかけして申し訳ありません。

      ご連絡からかなり時間が経ってしまいましたが、
      あれから何か進展などありましたでしょうか。

コメントを残す