将 CSS 添加到 iframe 页面？答案

【问题标题】：Add CSS to iframe page?将 CSS 添加到 iframe 页面？
【发布时间】：2015-05-27 18:12:25
【问题描述】：

简单来说，我已将一个视频上传到 Google 云端硬盘，并希望嵌入到我的网站中。我从共享视频页面检索了我在 Google 驱动器上的视频的嵌入代码：

<iframe src="https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview" width="640" height="480"></iframe>

如您所见，这只是 URL 的 iframe：https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview

访问上述 URL 时，我看到的是 YouTube 风格的视频播放器的全屏视图（点击图片中心的播放按钮后），以及非常令人沮丧的“弹出”箭头符号（在页面的右上角）。我确实不希望我网站的用户链接回我的视频的 Google Drive 共享视频页面（即https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/view）。我想要做的就是删除烦人的“弹出”箭头符号选项。

使用谷歌浏览器，我通过右键单击“弹出”箭头符号并单击“检查元素”进行了一个小测试——这将我带到了页面的代码，并选择了一个不相关的部分。我设法找到了淡入淡出样式按钮/栏的 div 元素 - 代码是：

<div class="drive-viewer-v2-toolstrip" role="toolbar" style="width: 52px; right: 0px; opacity: 0;"></div>

我编辑了代码，看看添加这段简单的 CSS 代码：display: none 是否可行：

<div class="drive-viewer-v2-toolstrip" role="toolbar" style="width: 52px; right: 0px; opacity: 0;display: none;"></div>

确实如此 - 当我将光标悬停在“弹出”箭头图像上时，它没有显示。当我点击它的区域时，它并没有打开 Google Drive 共享视频页面，而是播放了视频。

唯一的问题是它是在实际视频页面上编辑代码的测试。我真正想知道的是：是否有 ANY 方式，使用 ANY 编程语言（HTML、CSS、JavaScript、PHP 等），通过 iframe 删除我的页面上这个令人沮丧的“弹出”箭头？我一直在尝试使用 javascript 代码、css 代码，甚至 php 代码来回答类似问题，甚至是不同的网站，但都没有运气。

我想将 CSS 添加到页面中，就像我将其添加到官方视频页面（我的网站 iframe 通过 Google 提供的嵌入代码添加到的页面） - 我认为这个 CSS 是正确的：

.drive-viewer-v2-toolstrip {
display: none;
}

我了解与“跨域”规则有关的内容可防止此代码对 iframe 页面产生任何影响 - 但是否有任何方式（甚至是 hack）来简单地添加该代码或删除“弹出”符号图像？！

如您所知，我不是经验丰富的程序员，因此我们将不胜感激。

注意事项： - 使用的视频仅用于示例目的 - 它不是实际视频，但我认为我可以将 iframe src 更改为实际视频的 URL。 - 要查看我的测试页面，请访问此处：http://freemedia.x10.mx/index.html（抱歉 - 由于我目前的帐户限制，我无法发布两个不同的链接，因为我没有“10 声望”）。

【问题讨论】：

由于浏览器实施的同源策略，您不能这样做。您可以做的是使用 PHP 获取 HTML，解析 HTML，找到该元素，然后编辑 style 属性并输出新的 HTML。这可能行不通。

标签： javascript jquery html css iframe

【解决方案1】：

您是否尝试过使用 HTML5 的 <video> 标记（无论如何，这就是您的 iframe 中的内容）直接嵌入视频？

<video class="video-stream html5-main-video" style="width: 640px; height: 480px; left: 0px; top: -480px; transform: none;" src="https://r10---sn-4g57kney.c.docs.google.com/videoplayback?requiressl=yes&amp;shardbypass=yes&amp;cmbypass=yes&amp;id=951765eacbdee2ee&amp;itag=18&amp;source=webdrive&amp;app=docs&amp;ip=217.5.178.213&amp;ipbits=0&amp;expire=1432754244&amp;sparams=requiressl,shardbypass,cmbypass,id,itag,source,ip,ipbits,expire&amp;signature=691BAE82BA1FE4D4084DCCB9C1EBDA134AF4312B.A789605BB07CC90CBAE60AD24A9631022835B6DC&amp;key=ck2&amp;mm=30&amp;ms=nxu&amp;mt=1432750367&amp;mv=u&amp;nh=IgpwcjAxLmZyYTAzKgkxMjcuMC4wLjE&amp;pl=23&amp;cpn=jL7UCwA73YsFunXs&amp;c=WEB&amp;cver=html5"></video>

编辑：

我刚刚对此进行了测试，但它不起作用，因为src 并不直接指向视频文件，而是许多POST 参数，谷歌在嵌入 iframe 时用于创建视频。可以下载视频文件吗？

【讨论】：

感谢您的回答！我确实尝试了您的方法，它确实有效（无论如何在 Google Chrome 中） - 唯一的问题是 YouTube 风格的播放器丢失了，您必须右键单击才能播放/暂停视频。另外-我可以通过实际的视频共享页面（不是嵌入/iframe src URL）下载视频-这是您的意思吗？使用您的代码测试页面：freemedia.x10.mx/test.html
是的，这就是我的意思。您可以将视频文件上传到您自己的服务器 - 或一些具有 ftp 访问权限的免费服务器 - 并独立于谷歌提供的视频标签使用。你应该得到标准的 HTML 5 视频控件。
关于您的回答，我有两个问题：1) 您是如何获得“video”标签的“src”部分中的 URL 的？ 2）如果我要找到一个允许选择不同质量（例如：360p、480p、720p、1080p）的 HTML5 播放器，类似于 YouTube 播放器选择不同质量的能力，我能做到这一点吗？这个网址/src？还是此 URL 仅链接到特定质量版本的视频？（据我所知，当您将 1080p 视频上传到 Google Drive 时，Google Drive 会创建多个不同质量的副本）。提前感谢您的宝贵时间！
不，它只链接到一个特定的文件。对于如何提供连接质量相关文件的解决方案，您需要自己做进一步的研究。这也超出了您最初问题的范围。
我很抱歉。无论如何感谢您的宝贵时间！

【解决方案2】：

有一种残酷的方法可以做到这一点：

<div class="iframe_hide_poop">
<div class="magic"></div>
<iframe src="...."></iframe>

</div>

那么css部分就是：

.iframe_hide_poop{
 position:relative;
//add your stuff
}
.iframe_hide_poop iframe{
  position:relative; 
  //add your stuff
}
.magic{
  position:absolute;
  width:80px; 
  height:80px;
  top:20px; //adjust the value
  right:20px;//adjust the value
  background-color:#000;
}

这样，弹出按钮“上方”会出现一个 80X80 黑色区域，防止用户看到弹出窗口，或者您可以将 .magic 的宽度更改为 100%，它将显示为细横幅，如果您认为它看起来更好。

【讨论】：