I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used
It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1
Any help would be appreciated
I've embed pdf in my website using iframe google drive pdf viewer, below is my codes I've used
It works fine, but I want to remove the pop-out button appear on the top right corner in my website so that, viewers can't view outside my page]1
Any help would be appreciated
Share Improve this question edited Sep 25, 2018 at 8:16 Varsha Dhadge 1,75115 silver badges23 bronze badges asked Sep 25, 2018 at 8:03 kymbkymb 473 silver badges10 bronze badges4 Answers
Reset to default 3I was able to solve this problem with the following iframe sandbox attribute value:
<iframe sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
src=""
width="640"
height="480"
https://docs.google./gview?embedded=true&url="<url-your-pdf>"?t="1625427767140"></iframe>
Use this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{
height:100vh;
}
</style>
</head>
<body>
<iframe src="https://docs.google./viewer?url=http://www.pdf995./samples/pdf.pdf&embedded=true" width="100%" height="100vh" frameborder="0" scrolling="no" ></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
<!-- </div> -->
</body>
</html>
Try something like below: Using a hidden element on top of pop-out button makes it inaccessible. Or, if want to hide, remove opacity and set the background-color.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="http://docs.google./viewer?url=YOUR PDF/DOC FILE URL &embedded=true" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 40px; height: 40px; position: absolute; opacity: 0; right: 12px; top: 12px;"> </div>
</div>
The above answers do work, but with caveats.
Just the iFrame
sandboxprevents the button from working, but the button still shows.Just masking the button to prevent it from being clicked works, but the button still shows.
To disable the button and prevent it from showing:
<div style="position: relative;"><iframe src="http://docs.google./viewer?url=https://example./file.pdf &embedded=true" sandbox="allow-scripts allow-same-origin"></iframe><div style="width:40px; height:40px; position:absolute; background:white; right:12px; top: 12px;"> </div></div>