こんにちは
下記スタイルをテーマの style.css またはカスタマイズの [追加 CSS] に追記してみてください。
embed,
iframe,
object {
max-width: 100%;
}
早速のご連絡ありがとうございます！
ユーチューブの枠は、モバイルの枠に合うようになりましたが、
縦に長く見る場合、幅はあってるのですが、中の画像がはみ出てしまいます。
どうしたらよいでしょうか？
横向きでも、縦向きでも、画面に合わせて表示されるようにしたいです。
CG
(@du-bist-der-lenz)
メディアクエリを当てたり、PCとモバイルで出し分けることになるでしょう。
埋め込みコードを <div class="video-container"> ～ </div> でラップして、下記スタイルを記述する方法はどうでしょうか？
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
自動でラップさせるには、下記のようなコードを functions.php に追加するといいかと思います。
function my_youtube_embed_oembed_html( $html ){
if ( strpos( $html, 'youtu.be' ) !== false || strpos( $html, 'youtube.com' ) !== false) {
$html = '<div class="video-container">' . $html . '</div>';
}
return $html;
}
add_filter( 'embed_oembed_html', 'my_youtube_embed_oembed_html');
ご回答ありがとうございます。返信が遅れてしまい、すみませんでした。
まだトライしてませんが、
このラップをする際も、以前教えて頂きましたCSSの記述
.video {
height: 0;
overfow: hidden;
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
embed,
iframe,
object {
max-width: 100%;
}
を残したままにするのでしょうか？
教えてください。
CG
(@du-bist-der-lenz)
記述したコードは最後に読み込まれるものが、先に読み込んでいるものを上書きします。表示の処理作業がその分、時間がかかるだけです。
参考にトライさせて頂きましたところ、
iframe{ width: 100%; height:auto; }
これをCSS に埋め込んだところ、モバイルやデスクトップにレスポンシブに画面が合うようになりました。
ご回答、アドバイス頂きましたこと通りではないのですが、解決しましたこと報告申し上げます。
皆様ご回答ありがとうございます！
iframe{ width: 100%; height:auto; }
これだけでは、デバイスのサイズによては、はみ出す場合もあると思いますが・・・
様々なデバイスで確認されるといいかと思います。
余計なお節介なので問題ないということであれば無視してください・・・
CG
(@du-bist-der-lenz)
デバイスの画面表示サイズは千変万化。スマホの縦向きだと、横幅で合わせると、動画は小さく表示されるし、上下に間ができることもある。きりが有りませんよ。
