【问题标题】：How to stop "pop out" in embedded video with <iframe> from google drive如何使用来自谷歌驱动器的 <iframe> 停止嵌入视频中的“弹出”
【发布时间】：2016-09-20 06:56:26
【问题描述】：
使用 Google Drive，您可以在您的网站中嵌入带有标签的视频：
<**iframe src="https://drive.google.com**/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless></iframe>
右上角有一个灰色框。这会将您带到下载/嵌入 GoogleDrive 页面。我想停下来。
有人知道如何隐藏吗？
或者至少如何用自定义 CSS 掩盖它？
这是我通过检查 div 中的元素得到的：
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
【问题讨论】：
标签：
css
video
iframe
embed
【解决方案1】：
谢谢托马斯！好主意！
以下内容为我完成了这项工作。
弹出窗口没有隐藏（几秒钟后它会自行隐藏），但它仍然无法访问。
我认为这是最不难看的解决方案。
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
PS
“不透明度：0”是 Mozilla 的一种解决方法
【解决方案2】：
应该是这样的。我希望它有效。
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/0BxLbnVHP6GWpV2ZIZEc4SkNTOTQ/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
【解决方案3】：
您无法阻止它弹出，因为这是 Google 实施的。您也无法正常更改按钮，因为它是Google的页面，您无法修改它。
除非您在子页面（google 的页面）上启用了跨站点脚本，否则您无法“访问”到 iframe 加载的页面并对其进行修改，并且出于安全原因，Google 绝不会允许这样做。如果可以的话，我可以为人们提供 Google Drive 页面，但例如修改下载按钮以下载恶意软件。
唯一的解决方案是在 iframe 上的按钮顶部放置一个 div。但是，它仍然不是很漂亮，而且通常不受欢迎。 Google 免费提供该服务，以便他们决定人们如何使用它。
如果您运行下面的示例，请查看右上角的红色框。
类似：
.hidebtn {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: #FF0000;
position: absolute;
right: 50px;
top: 50px;
}
<div class="hidebtn">button</div>
<iframe src="https://www.example.com" frameborder="0" width="100%" height="500"></iframe>
【解决方案4】：
对我来说，u32i64/asd 的回答很好地阻止了图标被点击。为了摆脱黑条，我将代码更改为：
<div class="responsive-container">
<iframe src="https://drive.google.com/file/d/1Fy4AwZZVF-DLAenTSxQl93icdXfef/preview" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
确保 http 地址以“PREVIEW”结尾）
重要您必须将此添加到您的“附加 CSS”中：
.responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.responsive-container iframe, .responsive-container object, .responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
【解决方案5】：
谢谢 s1h4d0，它对我有用，也许在编程方面它不是最好的，但它有效，我谢谢你。
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><div class="hidebtn"><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
如果上面的代码不起作用，在div里面添加然后添加图片，这样操作：
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<div class="hidebtn"><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
【解决方案6】：
我想通了。将 URL 中的 drive.google.com 更改为 googledrive.com 以及其他一些更改：
- 获取唯一视频标识符（0B6VvIWR7judDX25yUGxVNERWUj）
- 放入这个html：
<body oncontextmenu="return false;">
<video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video>
</body>
“body oncontectmenu”只是删除了右键单击屏幕上任何内容的功能，因为没有此功能，您可以右键单击视频并下载文件。当然，整个页面的右键功能被移除了，人们仍然可以通过查看页面源找到该文件。
【解决方案7】：
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
【解决方案8】：
有一种更简单的方法可以阻止 googledrive 视频和文档上的弹出窗口，
无论您将 html、内嵌框架或灯箱放置在网站页面的何处，插入一个矩形并将其放置在您想要阻止弹出窗口的位置。
下一步-单击形状以获取其属性，在那里您应该找到许多选项
清除所有其他选项，除非您要插入自己的链接或徽标，否则请使形状透明，如果您可以选择显示边框线，我建议将其保持为 1 设置，直到您覆盖弹出的位置-out，一旦找到正确的位置，移除边界线并将其锁定到位。这很有效，因为我已经多次使用这种方法来阻止出现在视频和文档上的链接，它很简单，不需要使用任何代码。此方法仅在您设置了文档或视频的尺寸后才有效，一旦您完成了对视频或文档的所有测试，您会发现图标仍然出现但无法单击它。您可以使用此方法阻止用户访问您的信息或将他们从您的页面带走的第三方网站。此方法还可用于防止有人右键单击您的视频或文档和照片，如果他们试图复制它，他们将得到一个黑盒子。但是，您仍然可以从元素/源代码中获取信息。
【解决方案9】：
我尝试了之前的建议，但由于“Google Drive 拒绝连接”，它们没有奏效。
我想出了一个完全不同的方法来解决原来的问题（避免“下载/嵌入GoogleDrive页面”），非常简单：
-
创建一个 Google 幻灯片演示文稿，在幻灯片中插入您在 Google Drive 中的视频。
-
选择文件 - 发布到网络 - 嵌入，然后复制生成的代码。
-
在 Google 协作平台中，选择嵌入 - 嵌入代码，然后将其粘贴到那里。
此解决方案还提供了您在幻灯片中为视频控制的更多选项，例如自动播放、选择视频时间等。
【解决方案10】：
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Mano Souza · RIO DE PEDRAS.hmtl