How to stop “pop out” in embedded video with from google drive

问题

with Google Drive you may embed videos in your website with the tag:

<**iframe src="https://drive.google.com**/file/d/LINKTOMYFILE/preview"  width="640" height="480" frameborder="0" scrolling="no" seamless></iframe>

on the Top Right there is a Gray Box. This takes you to the download / embedding GoogleDrive page. I'd like to stop that.

Anyone one knows how to hide it?

Or at least how to mask it with a customs CSS?

this is what I get by inspecting the element in the 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>

回答1:

Thank you Thomas! Good Idea!

The following does the job for me. The pop-out is not hidden (it hides itself after few seconds) but it stays inaccessible. I think it is the least ugly solution.

<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;">&nbsp;</div>
</div>

PS The "opacity: 0" is a workaround for Mozilla

回答2:

You can't prevent it from popping out as that's something Google implemented. You also can't change the button normally as it's Google's page and you can't modify it.

You can't "reach" into the page loaded by an iframe and modify it, unless you have cross-site scripting enabled on the child page (google's page), and Google would never allow that for security reasons. If that would be able I could serve people a Google Drive page but for example modify the download button to download malware.

The only solution would be to place a div over the iframe, on top of the button. But still, it's not really pretty and usually frowned upon. Google offers the service for free so they determine how people use it.

If you run the example below, look at the red box at the top right corner.

Something like:

.hidebtn {
  width: 100px;
  height: 30px;
  background: #FF0000;
  position: absolute;
  right: 50px;
  top: 50px;
}

<div class="hidebtn">&nbsp;</div>
<iframe src="http://www.tweakers.net" frameborder="0" width="100%" height="500"></iframe>

回答3:

It should be like this. I hope it's working.

<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>

回答4:

For me the answer by u32i64/asd worked well to stop the icon being clickable. To get rid of the black bars too i changed the code to this:

<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>

Make sure the http address ends with 'PREVIEW')

Important You have to add this to your 'additional 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:

I figured it out. Change the drive.google.com in the URL to googledrive.com and some other changes:

Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:

<body oncontextmenu="return false;">
<video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video>
</body>

The "body oncontectmenu" simply removes the ability to right-click anything on the screen, because without this you can right click the video and download the file. Of course the right click ability is removed from the whole page and people can still find the file by inspecting the page source.

回答6:

<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>

来源：https://stackoverflow.com/questions/37390231/how-to-stop-pop-out-in-embedded-video-with-iframe-from-google-drive

标签

css