The backface-visibility doesnt hide the iframe backface
I created a flip box with iframe element on both side, when flip, the iframe on the front side will overlay the iframe on back side, apply backface-visibility: hidden does not hide it backface, although it shoud be:
Codepen link
<div class="flip3D">
<div class="front">
<iframe id ="frame" width="auto" height="auto" src="https://www.youtube.com/embed/wZZ7oFKsKzY?enablejsapi=1" frameborder="0">
</iframe>
</div>
<div class="end">
<iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
I can fix this by making the front side iframe visibility: hidden on hover. But
Question : Why backface-visibility is not working on iframe ?
You were missing transform-style:preserve-3d;?
I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.
The HTML:
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>
The CSS:
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?
Adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
I have found a fix thanks to trial and error!
the HTML
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>
the CSS
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
position:relative;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!
I have an auto generated PDF file by itext and I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?
Implementation of a PDF file in your HTML web-page is very easy.
<embed src="file_name.pdf" width="800px" height="2100px" />
Make sure to change the width and height for your needs.
I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
1. Browser-native HTML inline embedding:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
No PDF file size limitations (even hundreds of MB)
It’s the fastest solution
Cons:
It doesn’t work on mobile browsers
2. Google Docs Viewer:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
Works on desktop and mobile browser
Cons:
25MB file limit
Requires additional time to download viewer
3. Other solutions to embed PDF:
https://mozilla.github.io/pdf.js
https://pdfobject.com
https://viewerjs.org
IMPORTANT NOTE:
Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.
X-Frame-Options SAMEORIGIN;
If you want to use pdf.js, I suggest you to read THIS
You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe
or
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
test.pdf
</object>
you can display easly in a html page like this
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">
In html page for pc is easy to implement
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
but pdf show in mobile by this code is not possible you must need a plugin
if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
download
The simplest way is to use,
<iframe src="pdf-link">
</iframe>
and if its still getting downloaded instead of viewing, check the server response header, it should have, Content-Disposition:Inline and not, Content-Disposition:Attachment.
Portable Document Format (PDF).
Any Browser « Use _Embeddable Google Document Viewer to embed the PDF file in iframe.
<iframe src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0">
</iframe>
Only for chrome browser « Chrome PDF viewer using plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">
Example Sippet:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>
The element is supported by all browsers and defines an embedded object within an HTML document.
Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. Reference
Working code: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>
I've had something similar before and used normally tags
<strong>click here</strong>
but it's interesting to find out some other ways as above!
Also this method is useful:
Displaying pdf file on desktop and mobile browsers:
<object data="./filename.pdf" type="application/pdf" width="500px" height="600px">
<p>Your web browser doesn't have a PDF plugin.
click here to download the PDF file.</p>
</object>
Update - Adobe PDF Embed API
Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.
It delivers the highest quality PDF rendering available.
You can fully customize user experience and choose how to display a PDF.
You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.
All you have to do is create an api_key and use it in the code snippet.
Displaying PDF as buffer (local file for example)
Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example).
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
You can use
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
Or, if you want to make it take up the whole page:
Link
I understand you want to display using HTMl but you can also open the PDF file using php by pointing out the path and the browser will render it in a few simple steps
<?php
$your_file_name = "url_here";
//Content type and this case its a PDF
header("Content-type: application/pdf");
header("Content-Length: " . filesize($your_file_name ));
//Display the file
readfile($your_file_name );
?>
The answer provided by gofilord is right but I might also add that if you create an empty bucket to pour your pdf into you should give it a src="" like...
<embed id="fooEmbed" src="">
...in the HTML and in the javascript...
document.getElementById('fooEmbed').src = 'bar.pdf';
...it will work. If instead you do this...
<embed id="fooEmbed">
...it will not work.
If you're working with a local file this is the solution that worked for me.
const objectUrl = URL.createObjectURL(file);
<iframe src={objectUrl} width="100%" height="100%" />
source: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
I have used a google map in iframe.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Madurai,+Tamil+Nadu&aq=0&oq=madursi&sll=10.782836,78.288503&sspn=5.674603,10.755615&ie=UTF8&hq=&hnear=Madurai,+Tamil+Nadu&t=m&z=12&ll=9.925201,78.119775&output=embed"></iframe><br /><small>View Larger Map</small>
How to display a google map in black and white color?
It does work, but you should also add the formatting that the different browsers require for grayscale.
<div style="-webkit-filter: grayscale(100%);
filter: grayscale(100%);">
Here's the fiddle: http://jsfiddle.net/j9p9w62f/
By rights the only way to make a black and white Google Map is to use their Styled Maps api
Your post was tagged with API so I assume a non-iframe option is ok for you. If the inclusion method is not fixed this might will give you an idea of alternative. It is also possible to use the styled maps to generate a Google Static Map which would then also be iFrame friendly.
You could also take a look at Stamen maps Which are based on Open Street Maps, but can be used as overlay layers to Google Maps. The form of delivery is not likely possible just through a crafted iframe url.
Try to use
<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe>
.map {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
This will help
This one is achieved by using some css
Here is working code
.map {
filter: grayscale(100%);
}
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4917.1193047590605!2d4.4690507720313!3d51.96022102967837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5cb67ae23c02d%3A0xdac4c06bc7904d2!2sRododendronplein+10%2C+3053+ES+Rotterdam%2C+Nederland!5e0!3m2!1snl!2ses!4v1541007683407" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Add a <div> arround the <iframe> and stle it as:
webkit-filter: grayscale(100%);
Have you tried https://mapstyle.withgoogle.com/? You can configure it as you wish and have an url or json ready to use in your code.
I'm loading an Iframe from an External server of mine onto my webpage, and I wanted a loading image, because sometimes it take a good 10 seconds to load. All is well in Chrome but in IE nothing.
<center>
<div style="background: #ffffff url(http://mentalized.net/activity-indicators/indicators/simon-claret/progress_bar.gif) no-repeat 50% 5%;">
<iframe src="http://x.x.x.x/panel.php" allowTransparency="true" width="100%" height="450px" scrolling="no"></iframe>
</div>
</center>
My other question is, is there a better way of doing this? I can't use ajax because it's an external server, but is there a better way of doing a loading image with an iFrame? Thanks!
Try putting the style with the background image information on the iframe itself, rather than the separate div.
<iframe src="http://x.x.x.x/panel.php" allowTransparency="true" width="100%" height="450px" scrolling="no" style="background: #ffffff url(http://mentalized.net/activity-indicators/indicators/simon-claret/progress_bar.gif) no-repeat 50% 5%;"></iframe>