如何使 iframe 适合离子模式答案

【问题标题】：How to make iframe fit ionic modal如何使 iframe 适合离子模式
【发布时间】：2015-07-15 09:45:59
【问题描述】：

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

这是我的模态代码：

<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

【问题讨论】：

标签： css iframe ionic-framework

【解决方案1】：

要制作响应式视频，请尝试以下操作：

围绕 iframe 代码创建一个容器 div 并为其指定一个类，例如：

<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/

【讨论】：