ワードプレス youtube 動画 レイアウトが崩れてしまい横幅が合わせられません。

Question

お世話になります。宜しくお願い致します。

ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられず困っております。

前提・実現したいこと

ワードプレスで以下のように動画を埋め込む事ができましたが
レスポンシブにした場合でもワードプレスでyoutube動画を横幅を揃えて掲載したいです。
しかしレイアウトが以下写真のようにずれてしまいます。具体的には本来の横幅デザインレイアウトよりも
大きく動画がはみ出してしまいます。

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}

@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}

宜しくお願いします。

Answer 1

max-width を指定してください。
スマホサイズの場合のみに適用する場合はメディアクエリ内に入れてください。

.single iframe {
  margin-right: 0;
  margin-left: 0;
  border: 0;
  max-width: 100%;
}

Comments

[jbe4w86ixd]

お世話になります。いますぐ試させて頂きます。

[jbe4w86ixd]

上記CSSを設定してみましたが画面が固定され動かなくなりました。

html側は<div class=”single iframe”>と書かなければいけないのでしょうか？
メディアクエリのサイズは具体的にいくつが一般的でしょうか？

[jbe4w86ixd]

メディアクエリの書き方を「コードで」教えてください。

[yasutomi]

メディアクエリの書き方くらいは
自分で検索して調べるべきかと。
https://www.google.co.jp/search?q=%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA+%E6%9B%B8%E3%81%8D%E6%96%B9

[jbe4w86ixd]

singleiframeをdivとして指定しましたが、レイアウトがはみ出て変わりませんでした。

[jbe4w86ixd]

メディアクエリの書き方以外にご提示頂いたコードを試しましたが動画レイアウトがはみ出てしまい何も変わりありませんでした。

[jbe4w86ixd]

情報ありがとうございます。

[yasutomi]

よく読んで考えましょう。
> スマホサイズの場合のみに適用する場合はメディアクエリ内に入れてください。

[jbe4w86ixd]

ご教示頂きましたコードを書きましたがメディアクエリでyoutube動画がレイアウトからはみだしてしまい正しく動きません。

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}

@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */

.single iframe {
margin-right: 0;
margin-left: 0;
border: 0;
max-width: 100%;
}

[yasutomi]

HTMLコードも何度も見返して
何がおかしいのかよく考えましょう。
<div class=”youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=0r0ZaPIpd1g” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>

[jbe4w86ixd]

single iframeに変更しました。よく読んで考えて何度も見返してますし何がおかしいのかよく考えて質問させて頂いています。恐れ入りますがこういった説教ではなく具体的にコードで回答を求めています。質問に対して「よく読んで何度も見返せ！何がおかしいのかよく考えろ！」というのは失礼ですしやめてくれませんか？真剣にわからないのでみなさんに質問させて頂いてますので非常に迷惑です。真面目に質問させて頂いてますので宜しくお願いします。

<div class=”single iframe”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=0r0ZaPIpd1g” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>

[yasutomi]

勘違いをされているようですが説教ではないです。
申し訳ないですが、コードをよく確認していただけない方への
回答は控えさせていただきます。

[jbe4w86ixd]

了解しました。回答頂きありがとうございました。

[yukikp]

とりあえず、あなたのHTMLを質問部分に追記してください…。

[yasutomi]

HTMLが質問に記載されておらず、
低評価に該当する「問題・課題が含まれていない質問」になっていますね。