添加CSS来的iframe页面?(Add CSS to iframe page?)

2019-10-23 05:03发布

在我开始之前,我想先道歉,如果这个问题是一个重复的或我的语法部分不完美的使用这项服务问一个问题的令人难以置信的,荒谬的标准-我几乎可怜太害怕在这里提出的随着越来越被滥用,因为我的问题似乎“太长时间阅读”或“过于相似,”其他国家的担心 - 但我已经尝试了许多提供类似的问题的答案/解决方案之前询问,有没有人帮助解决我的具体案件。 即使是一些类似的,问题的答案是不相关的我的情况,但我仍然尝试过,没有运气,当然。

简单来说,我已经上传到谷歌云端硬盘中的视频,我想嵌入到我的网站。 我检索从共享视频页面嵌入代码为我的谷歌驱动器上的视频:

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

正如你所看到的,这简直是一个iframe来的网址: https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview

当访问上述网址,我提出了一个YouTube的风格的视频播放器的全屏视图(点击图片中央的播放按钮之后),以及一个非常令人沮丧“弹出”箭头符号(到在页面的右上角)。 我希望我的网站的用户为我的视频(即链接回谷歌驱动器共享视频页面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>

它做到了 - 当我徘徊我的光标移到“弹出”箭头图像,它并没有显示。 当我在其区域点击,而不是打开的谷歌驱动器共享视频页面,它播放的视频。

与此唯一的问题是,这是一个测试编辑实际的视频页面上的代码。 我真正想知道的是:有没有什么办法,使用任何编程语言(HTML,CSS,JavaScript的,PHP等),以消除这种令人沮丧的“弹出”通过的iframe我的网页上箭头? 我已经花了几个小时试图使用JavaScript代码,CSS代码,甚至回答没有运气类似的问题,甚至不同的网站的PHP代码。

我想CSS添加到网页中,如果我是将它添加到官方视频页面(页面我的网站的iframe通过由谷歌提供的嵌入代码) - 我觉得这个CSS是正确的:

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

我的理解是与“跨域”规则防止具有的iframe页面上的任何影响的代码-但有什么办法,甚至是黑客,简单地添加代码或删除“弹出”符号图像?

正如你所知道的,我不是一个有经验的程序员,所以一些支持将不胜感激。

注: - 所使用的视频只是为了举例的目的 - 它不是实际的视频,但我想我可以只改变IFRAME SRC实际视频的网址。 -要看到我的测试页面,去这里: http://freemedia.x10.mx/index.html (抱歉-此网站是幼稚的,不会让我发布两个以上的链路只是因为我没有“ 10声誉“)。

Answer 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时创建的视频。 您可以下载视频文件?



Answer 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%,它会显示为薄的一面旗帜,如果你认为它看起来更好。



文章来源: Add CSS to iframe page?