iflameのレスポンシブ対応について

Question

お世話になっております。
只今、Wordpressを使用し、動画のまとめサイトのようなものを作ろうとしております。
記事に載せる動画のiflameのレスポンシブ対応について質問があります。

只今、記事に載せる動画は以下のコードにて埋め込んでおります。

<div class="iframe-content"><iframe src="URL" frameborder=0></iframe></div>

.iframe-content {
  position: relative;
  width: 100%;
  padding: 75% 0 0 0;
}
.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

すると、paddingの設定によって、
動画のすぐ下に置いてあるボタン群がクリックできなくなってしまいます。

位置をずらさずに、iflameの真下にある領域を機能させる方法はありますでしょうか？

諸事情がありまして作業中のページをお見せすることができずに申し訳ございません。
これだけの情報ですが、お応え頂けたら大変嬉しく思います。

何卒よろしくお願いいたします。

Answer 1

ボタン群が物理的にdiv.iframe-contentの外側に位置しているのであれば、
z-indexで動画を下、ボタン群を上に来るように設定してみてはいかがでしょうか？

Comments

[Kiccchooon]

ご返信ありがとうございます。
遅くなってしまい申し訳ありません。

iflameにz-index: -1;
という記述は向こうでした。

ボタン群にもz-indexの記述をしなければならないということでしょうか？

大変お手数お掛けしますが、よろしくお願いいたします。