ワードプレスに動画を「そのままのサイズで」埋め込みたいけど、
スマホ（iPhoneやAndroid）で閲覧してみると
画面の横幅からハミ出してしまうのがイヤ！
この記事では、ワードプレスに
ちょっとしたHTMLコードを加えるだけでこの問題を解決できる方法をお伝えします。
解決策
※上記画像はクリックで拡大できます。
※こちらの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動画が収まるよう自動調節されます↓↓
関連記事：WordPressにYouTubeの埋め込みタグを入れたら消える問題の解決方法
ぜひ参考にしてみてくださいね！
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/functions.php on line 490
TCD「OOPS!」(tcd048) で試してみたところうまく反映されて、思わず「おぉ…！」と小さく歓声をあげました。ありがとうございました！
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/functions.php on line 490
はじめまして
突然申し訳ありません
こちらのやり方を試させていただきましたが、nagaiさんと同じく500エラーが起きております…
もとに戻す方法としてはFFFTPSで、custom.phpを元に戻すという方法が正しいのでしょうか？
このようなトラブルは初めてであり、FFFTPSを使ったこともないため大変焦っております…
お返事いただけましたら幸いです。
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/functions.php on line 490
マナさん、初めまして。
custom.phpを元に戻してみてください。
もしかしたら、私の観測範囲外で、ワードプレスのテーマとの相性があるのかもしれませんね。
お手間をかけてしまい申し訳ありませんが、元に戻してみていただけますでしょうか。
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/functions.php on line 490
はじめまして。大至急助けて頂きたいです・・・。
会社のウェブサイトを担当しているものです。
ワードプレスで動画を入れたのですが、携帯ですと。はみ出すので
こちら様のサイトに記載されているコードをコピーしたのですが、そのとたんにサイトがみられなくなってしまいました。
会社では私以外にウェブをするものがおらず、途方にくれております。もとに戻す方法をおしえていただくことはできますでしょうか？
お忙しいところ申し訳ございませんがどうかよろしくお願いいたします。
出たエラーメッセージは、下記です。
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
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/functions.php on line 490
nagai様
初めまして、みやえらと申します。
私の記事のやり方でエラーが出たとのことで、
ご迷惑をおかけして申し訳ありません。
ご連絡からかなり時間が経ってしまいましたが、
あれから何か進展などありましたでしょうか。