css - 如何使 iframe 适合 ionic 模态

Question

我在 ionic 模式中显示 iframe 时遇到了一个小问题，我希望 iframe 的宽度和高度取决于 ionic 应用程序窗口。

这是我的模态代码:

<ion-modal-view>
  <div class="bar bar-header" style="border-bottom:1px solid #ccc;position:relative">
    <div class="h1 title" style="display:flex;flex-direction:column;line-height:initial;justify-content:center;padding:0 32px">
      {{team.name}}
    </div>
    <button class="button button-clear button-positive" ng-click="modal.hide()">Fermer</button>
  </div>

  <io-content>
    <iframe src="http://www.wikipedia.fr" style="width: 100%; height: 100%!important"></iframe>
  </io-content>
</ion-modal-view>

PLUNKER PERVIEW

Answer 1

要制作响应式视频，试试这个:

围绕 iframe 代码创建一个容器 div 并给它一个类 eg:

<div class="video-container"><iframe.......></iframe></div>

在 CSS 中添加:

.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%;
}

字体:https://coolestguidesontheplanet.com/videodrome/youtube/