如何使 iframe 中的内容响应式

How to make the contents inside an iframe responsive?

本文关键字：响应 何使 iframe      更新时间：2023-09-26

我嵌入了一个来自使用 iframe 流式传输频道的网站的播放器。我能够使iframe响应。但是内容（即iframe中的视频播放器）无法适应视口的变化。我已经尝试了互联网上的几种解决方案，但所有这些解决方案都使 iframe 响应，但不能使里面的内容响应。

有什么方法可以使 iframe 中的视频播放器响应式？

请注意，我无法访问播放器的源代码。

这是html文件的链接：IFrame代码（我无法创建这个工作小提琴。所以分享了文件）

请注意，我无法访问播放器的源代码。

你遇到了麻烦

处理iframe时要知道的一件主要事情是iframe的来源

  • iframe 源代码与呈现此 iframe 的主页具有相同的域：在这种情况下，浏览器将允许您将手放在 iframe 内容上并根据需要对其进行操作。由于主站点和 iframe 都在同一个域下，这意味着您是授权人员，因此您可以根据需要更改内容。

    因此，即使您无法访问文件的源代码，如果它们位于同一域中，仍然有办法使您的内容响应。 This would require Jquery

  • iframe 源域与呈现此 iframe 的主页不同：在这种情况下，除了在页面中显示它之外，您无法对 iframe 执行太多操作。浏览器将不允许您更改此iframe上的任何内容。这是所有浏览器都遵循的安全协议。

    • 如果我们有权操作内容会发生什么 - 例如：我可以在我的网站的 iframe 中渲染 youtube，并将字符串"youtube"的所有实例更改为我自己的名字，从而使整个网站看起来像我自己的。我也可以操作ajax调用，jquery的东西等。并从站点获取数据。
相关文章：