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.
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>`
Many times I am only interested in the first portion
and would like to make a "collage", say of arriving buses at nearby stops and fit more on a small screen.
I found I can use "iframe", but having the cursor in the frame of course scrolls the frame
rather than scroll me further down the web page. Just for variety I include an image too.
Is there a better way to post "heads" of web pages? (I probably know to little about CSS and Bootstrap, etc.)
Running the snippet here shows only the traffic cam, but pasting it for example into http://htmledit.squarefree.com/ or local html file runs just fine. https://codepen.io/pen/ shows pugetsound "refuses to connect".
<div class="thumbnail-container">
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>
<img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" /> <!-- or a placekitten.com ;-) -->
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>
</div>
Just to show that there are other example applications I run into frequently
would be the weather for the next 2 days only, or the temperature for the last few days.
An answer to above would solve many problems.
height=380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2
height 120px https://atmos.washington.edu/~neal/uwp/index72.cgi
If the issue is you do not want the iFrame to scroll, you can try:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
I'm trying to troubleshoot a strange bug on one of our pages (https://www.bbg.org/visit/sakura_matsuri_photos).
The bottom of left of the page has the text 'cp_vimeo_code.js Open' and I can't figure out what is generating this.
here is what it looks like
I've noticed that there are other websites that show this error too, for example: https://www.indicia.nl/project/anderson-macgyver/.
I have the following three embeds inside the body tag of a webpage in Expression Engine. Taking them out eliminates the error.
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978232?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978156?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/160249045?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
Has anyone seen something like this before? I can't find it on Vimeo's site anywhere.
Here is a picture of the error on our page
It looks like this is a call from an addon, that's trying to load a .js file for use in the control panel. However, since you're not in the CP it'll show the call as text.
Maybe see if the addon needs updating, or, since there are a lot of video player addons that have been abbandoned, need replacing
More indepth answers can be found on EE's own Stack: https://expressionengine.stackexchange.com/
I finally figured where this was coming from, it was some extra code in a Google Tag Manger custom tag!!
I have the following iframe:
<iframe src="https://www.weddingwire.com/morgancamille" style="border:0px #FFFFFF none;" name="weddingwirersvp" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="600px" width="600px"></iframe>
... and it would appear that the website who's form I would like to display elsewhere has some iframe-specific parameters to deter people from displaying the form on other sites. Any ideas on how to get around this?
Changing the document to that particular iframe may help. Otherwise, you are running up against the intended purpose of iframes. You say you want to display elsewhere, but the purpose of an iframe is to prevent it from being displayed elsewhere.
jQuery/JavaScript: accessing contents of an iframe May be helpful here.
I have a webpage that I would like to embed within another page. On the page that is to be embedded I have some window.onload javascript that will load a PDF document via the embed tag. If I use just the Iframe tag like this:
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
The Javascript will run just fine. But I am trying to create a background and border for the iframe so I have wrapped the iframe in a div like so:
<div id="content" class="border">
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
</div>
As soon as I do it this way the javascript will not run. Here is the screenshot of what I am trying to do. I do not believe that the styling that is present on the div ( curved borders, gradient, etc is possible on an iframe)
I am using PDFObject to generate the PDF on the page. The iframe is also loading the company's external website in the content section on demand and this is what they want so unfortunately i have to use iframes. This has to be done without using anything except javascript as well otherwise I would just use php.
I have to post the SCREENSHOT outside of this site on photobucket due to restritions sorry:
http://i721.photobucket.com/albums/ww217/the_t3rminat0r/Capture-2.png
It looks margin property in div style (or border class in your example) causes the problem.