Skip to content

Instantly share code, notes, and snippets.

@stupid-kid-af

stupid-kid-af/iframe.html

Last active May 15, 2022 17:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stupid-kid-af/2523441952fb9127b5d4e7542984f6ee to your computer and use it in GitHub Desktop.
Save stupid-kid-af/2523441952fb9127b5d4e7542984f6ee to your computer and use it in GitHub Desktop.
Download ZIP
responsive iframe with not downloading pdf [GDrive]
Raw
iframe.html
<!DOCTYPE html>
<html>
<head>
<title>Example on how to embed Google Drive PDF inside website</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="bcc.css">
</head>
<body>
<div class="container">
<iframe class="responsive-iframe" src="https://drive.google.com/file/d/1SSdjDGJPbpeCjOUZyEOwPjvMXtnwrkfy/preview"></iframe>
</div>
</body>
</html>
<!-- https://cloudpdf.io/blog/how-to-embed-a-pdf-in-html-without-the-ability-to-download -->
<!-- https://www.w3schools.com/howto/howto_css_responsive_iframes.asp -->
<!-- CSS=> make another file
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment