完全レスポンシブ対応時の埋め込み動画のサイズの変更について

PR 2017/8/27

このトピックには7件の返信、2人の参加者があり、最後にわいひらにより9年、 2ヶ月前に更新されました。

7件の返信スレッドを表示中

投稿者

投稿
- 2017年8月26日 1:37 AM #55339
  
  たんくじゃが
  ゲスト
  
  色々調べましたが、解決しないためご質問させていただきます。
  
  完全レスポンシブ対応時にスマホで埋め込み動画（youtube、海外動画サイト等）を
  見る際に動画サイズはスマホ化しておりますが、再生ボタンを押す前に広告が表示されるケースがあると思います。
  その広告が横に長く、右端にきれているケースがあり、再生ボタンを押せないケースがあります。
  
  完全レスポンシブ対応時にスマホから見た埋め込み動画のサイズを小さくするorスクロールさせ動画を動かせるようにすれば解決すると思いますが、どこをどう動かしたらいいのか分かりません。
  
  もし解決方法をお分かりの方がいらっしゃればご教示して頂きたいです。
  よろしくお願い致します。
- 2017年8月26日 3:16 AM #55342
  
  かうたっく
  ゲスト
  
  iframeを使ったレスポンシブ対応でしたら、状況に会わせて3つほど対応策がありますよぉ
  
  下記リンクの目次2.2
  YouTubeが見切れてスマホからはみ出す時のCSS
  https://bibabosi-rizumu.com/swaying-mobile/
  
  そこにあるiframeを100%にしても無理なら
  YouTubeはみだし対応している他2つの方法で試してくださいっ
- 2017年8月26日 3:21 AM #55343
  
  かうたっく
  ゲスト
  
  その広告が横に長く、右端にきれているケース
  
  あっ、見逃してました、、
  
  これなら、iframeを100%に
  と思うんですけど、実際見てないのでおそらくですが、一度試してください
- 2017年8月26日 12:22 PM #55354
  
  たんくじゃが
  ゲスト
  
  ご回答ありがとうございます。
  iframe {
  max-width: 100%;
  上記のコードをスタイルCSSのどの部分に入力すればよろしいのでしょうか？
  初心者で申し訳ありません。。。
- 2017年8月26日 12:53 PM #55357
  かうたっく
  ゲスト
```
iframe {
	max-width: 100%;
}
```
  ですね。
  
  子テーマのstyle.cssの一番下にでもつけて試してください。
  それか、URLを置いて頂けたら＾＾
  
  ※動作不良に関する質問は、不具合の出ているページのURLを掲載してください。
  
  ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。
- 2017年8月26日 12:58 PM #55359
  
  たんくじゃが
  ゲスト
  
  解決致しました！
  ありがとうございました。
- 2017年8月26日 4:02 PM #55362
  
  かうたっく
  ゲスト
  
  良かったです＾＾
- 2017年8月27日 2:42 PM #55389
  
  わいひら
  キーマスター
  
  かうたっくさんありがとうございます！
投稿者

投稿