Google Chrome or Chromium (latest/stable version).
When i have an iframe with following
<style>
iframe{
overflow:hidden;
}
iframe::-webkit-scrollbar {
display: none;
}
</style>
<iframe
src="images/tion.pdf#scrollbar=0&scrolling=0&page=1&zoom=50&scrollbar=0&toolbar=0&navpanes=0"
width="410px"
height="570px"
id='myiframe'
style='border:none;'
scrolling="no"></iframe>
It seems like it is impossible to hide the scrollbar horizontally or vertically when the PDF file is containing more then 1 page?
I have tried all the related answers from stackoverflow but none of them is resolving it.
But when i use the same code in OSX with Google chrome or OSX or on Linux it works. It is not working when i use Windows and Google chrome/Chromium.
Is this unknown missed out BUG or iframe was designed like this for windows , when there is a PDF you cant remove the scrollbar's?
Try to set width and height like this:
<iframe name="right_side" src="" width="50%" height="50%" ></iframe>
hope it will help you!
The tag which is overflowing inside the iframe, add css {overflow:hidden} to that tag.It might work
Related
I want to disable Picture in Picture feature for <Video> tag for my website due to some certification requirements but firefox does not allow to turn off. Any help would be appreciated.
Firefox uses a shadow-root with {mode:"closed"} to forcefully display Picture in Picture toogle (See the image).
Firefox also not supporting Picture-in-Picture API - check this link
Note: I have also added disablePictureInPicture attribute but still it's not working for firefox.
<video width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls disablePictureInPicture></video>
As far as I know, there is currently (as of Firefox 72) no option for website authors to disable the button. Only users can hide it via the Firefox settings.
Though a request to add an API was created just a few hours ago.
Videos without audio do not have the picture in picture button in firefox. This will not work for all use cases, but it might be useful in some situations. If you really depend on it and having audio you could try using a separate audio tag, but that could result in desynchronization issues.
You can do this e.g. using ffmpeg like described in this question.
I have found one solution for this Bug 1610522 - Ability for developers to hide/disable picture-in-picture button.
If you put video in Iframe <iframe> picture in picture feature. is not showing.
<div class="video-foreground">
<iframe frameborder="0" width="350" height="250" allowfullscreen srcdoc="<html><head><style>body{margin: 0;padding: 0;}.bg-video-wrap {position: relative;overflow: hidden;width: 100%;height: 100vh;display: flex;}video {object-fit: cover;min-width: 100%;min-height: 100vh;z-index: 1;}</style></head><body><div class='bg-video-wrap'><video loop muted autoplay><source src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' type='video/mp4'></video></div></body></html>" >
</iframe>
</div>
here is the example
document.head.innerHTML += ` <style>
.pip-expanded, .pip-small, .pip-icon, .pip-explainer {
position: absolute;
left: 0;
top: 0;
display :block;
}</style>`
Hi dead StackOverflow community!
I'm currently facing problems with Google Chrome 61.
I'm creating a PDF file dynamically and embed it into an iframe on a new tab. (Actually it's our customer's whish. So there is no alternative in displaying). The created PDF document is delivered by a base64 string.
While we can view the PDF without any problems it's impossible to download it via the standard viewer of Google Chrome by pressing the "Download"-Button.
On Firefox everything works as expected. On Chrome you can press the button but it has no effect.
Basically this is my html page:
<html>
<head>
</head>
<body>
<iframe src="data:application/pdf;base64,MY_BASE_64_STRING" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen="">
</iframe>
</body>
</html>
If i'm viewing the contents inside the iframe I am able to see a lot of plugins and internal Google-Code which I think is for viewing the PDF document. A lot more than Firefox offers.
Am I missing something? I haven't got such problems in Pre-60 versions of Chrome.
Thanks in advance!
Best regards,
Mischaal
I'm attempting to embed a facebook post onto a website. I took Facebook's most basic example and plugged it into the html. On the page I see a big empty space, but no embed post. If I visit Chrome or Safari this looks perfectly fine. I'm using Firefox 47. What's interesting is that in Firefox when I visit the iframe tag I see the following generated html.
Generated html for embedded post:
<iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500&show_text=true&height=290&appId" width="500" height="290" frameborder="0" scrolling="no">
</iframe>
Code inside iframe:
<html>
<head></head>
<body></body>
</html>
What's wrong and how do I fix this?
I downloaded Firefox 47.0 for Mac and tested your code. It opens here!
Attached is a screenshot. Sorry, this is no answer, but I cannot attach an image in a comment. So chose to answer.Screenshot on Firefox 47.0
I have the following iframe:
<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0" height="90%" id="MyFrame"></iframe>
I simply want to capture a screenshot of the iframe contents as they stand, I've tried html2canvas but it doesn't seem to work. I've tried placing the iframe inside a div but no joy.
I've seen various methods of achieving this using php, but nothing that seems clear. Can anyone shed any light?
It's written in the limitations section of the doc: http://html2canvas.hertzen.com/documentation.html#limitations.
The script doesn't render plugin content such as Flash or Java
applets. It doesn't render iframe content either.
Screen capture using JS raises security problems.
Recently I've been trying carota (https://github.com/danielearwicker/carota) with some success to render HTML text on a canvas. However, it only handles a small subset of HTML.
There is also the SVG foreignobjectapproach which makes it possible to render DOM objects in a canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
Unfortunately, it is not implemented in IE, including IE 11.
I am trying to display a PDF in an iframe..So there are 2 frames and the bottom frame has the pdf. It is coded as;
<frame src="ebook.pdf" title="Content Frame" name="content" id="content" frameborder="0" border="0" noresize scrolling="yes" marginwidth="0" marginheight="0" noresizescrolling="AUTO" framespacing="0" />
For some reason, I am unable to scroll through the PDF in iPad Safari...More specifically within the iframe..
Is this a PDF issue or is it an iframe issue?
I have tried the using the instead of frame..Still does not work..
Please help.
Thank you.
When you insert the <iframe> into a <div> with height specification and set overflow-y to scroll (maybe auto i did'nt try) you can scroll using two fingers on iPad. It has no effect on pc browsers.
Heres a link to an iframe that doesnt scroll on the ipad:
I have to redesign all my pages in iWeb now since the iPad won't scroll iFrames made with iWeb on my iPad. I get quite a few hits from people using iOS.
Scrolling within frames is a tricky UX thing with the iPad -- try scrolling with two fingers. I don't know about PDFs, but that's how scrolling is done for other frames in Safari.
Use (iOS App) Opera Mini browser instead, when clicking on a pdf in Opera Mini it induces Safari to open the PDF in a non-frame mode. Weird I know but it works.