月収10万円を稼ぐ元SEO1位の商標ペラサイトを公開します

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

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

Pocket


wp-youtube2

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

 

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

 

解決策

wp-youtube-haba

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

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

 

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

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

 

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

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

 

<div class="video-container">
    ビデオ動画コード
</div>

 

つまり

<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の埋め込みタグを入れたら消える問題の解決方法

 

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

Pocket


オンライン指導の実績

5件のコメント

  • TCD「OOPS!」(tcd048) で試してみたところうまく反映されて、思わず「おぉ…!」と小さく歓声をあげました。ありがとうございました!

  • マナ

    はじめまして
    突然申し訳ありません
    こちらのやり方を試させていただきましたが、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様

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

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

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


Warning: Use of undefined constant お名前 - assumed 'お名前' (this will throw an Error in a future version of PHP) in /home/paparazzi/hebrakaela.com/public_html/wp-content/themes/refinepro/comments.php on line 31

Warning: Use of undefined constant メールアドレス(公開されません) - assumed 'メールアドレス(公開されません)' (this will throw an Error in a future version of PHP) in /home/paparazzi/hebrakaela.com/public_html/wp-content/themes/refinepro/comments.php on line 33

Warning: Use of undefined constant ウェブサイト - assumed 'ウェブサイト' (this will throw an Error in a future version of PHP) in /home/paparazzi/hebrakaela.com/public_html/wp-content/themes/refinepro/comments.php on line 35

コメントを残す