缩放Google幻灯片iframe

Question

我是网页设计的新手，目前我正在为我的学生在Moodle上创建一个在线课程。我想根据父窗口缩放嵌入式Google幻灯片演示文稿的iframe内容。我在responsive-google-slides上找到了一个解决方案：

.google-slides-container{
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
}

.google-slides-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

然后将Google幻灯片代码封装在标签中：

<div class="google-slides-container">
    [Your Google Slides Embed iFrame Code]
</div>

我的问题是我没有管理权限(不能访问文档头，CSS样式表等)在Moodle上。我正在寻找一种在文档体中包含这些属性的方法。我试图包含样式标签，但Moodle总是覆盖它们。有没有办法用JavaScript创建"google-slides container“和”google-slides iframe“这两个类，或者在div标签中包含这些属性？非常感谢你，马库斯

Answer 1

以下代码适用于我：

<div class="embed-container"
 style="position: relative; padding-bottom: 59.27%; height: 0; overflow: hidden; max-width: 100%;">
 <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  src="[Enter src from Google Slides Embed iFrame Code]" frameborder="0" width="960" height="569" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>

您可以根据需要更改填充底部百分比值。