iframe doesn't load until after hover - html

I am using an iframe to publish an interactive chart from Google Sheets. The iframe will not load on the page until I hover over it with a mouse. (Tested with latest chrome browser on desktop and mobile)
Workaround experiment: I changed the iframe from interactive mode to image and the iframe loads immediately.
iframe frameborder="0" height="371" id="chartframe" scrolling="no" seamless="" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRUJ3BujnYfrxc4FCgIfcCg58qEtuaaHRtFZ33MaM-tn4nemyxbp4i3usiJdwHPkXqOn9V-RcpqdLQe/pubchart?oid=197457924&format=interactive" width="570"
Expected: Up until a couple a days ago the iframe for the charts in interactive mode would load within a few seconds. This has been the behavior for several years.
Issue: Then with no changes to my side, all interactive iframes for all charts across multiple websites & platforms and from multiple sheets fail to display until I hover over the chart area when using interactive mode.
(HTML snip shown is what worked fine until a couple of days ago.)

I started seeing this exact behavior recently as well.
It happens with Chrome, Safari, and Firefox (at least).
Here's my iframe code:
<iframe width="550" height="550" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQC5Xml_m97eBQfjXeoG9ZP5U-ApXSiDJI7eYYqXzw7tyFBDmVDG5sbLxOoo5O29LOEM0EE21xTfthq/pubchart?oid=525571464&format=interactive"></iframe>
Is yours a SquareSpace website (mine is)?

Related

YouTube iframe cannot go full screen

Youtube used to work fullscreen on my site, but a few weeks ago (i think?) it started saying "Youtube cannot go full screen".
I got the code snipped from my site here. And it works in here:
https://www.w3schools.com/code/tryit.asp?filename=GNBNH5E3ZCPS
Any idea why it wont work on my site? Its exacly the same code.
The site i mentioned is www.contribee.com (scroll down a bit for the iframe video)
Also on a side note: it dose go fullscreen on a mobile browser. But it wont work on desktop Chrome (it does work on w3 editor from any browser)
Try changing the fullscreen = true; and call a function
https://support.google.com/youtube/answer/72689?visit_id=637480296059280325-3361042641&rd=1
<iframe id="video" src="Source" frameborder="0" allowfullscreen></iframe>

Amazon Ad Widget not showing properly in Multiple browsers

I have been using Amazon Ad Widgets on my website so that my client would purchase necessary things which are helpful in using my services. The code that I added in my HTML is as follows. As I added it, It seems like some icons inside the widget are not showing up, it shows a blank image in some browsers as if the path of the image is not right. In some browsers, I can't see the whole widget but blank space only.
The analysis that I did about it is the icons that are not showing have some security restrictions. For example, this icon that I got from inside iframe that says Your connection is not private.
https://wms-na.amazon-adsystem.com/panda/20070822/US/img/a-logo-amazon.png
Code:-
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=1324010-20&marketplace=amazon&region=US&placement=B01GDJ2BH6&asins=B01GDJ2BH6&linkId=070ae8535be3448b20d903f2a7e49ea0&show_border=false&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff"> </iframe>
Browsers with icons on widget missing:- Chrome, Firefox, IE, Opera
Browsers with no widget are visible just blank space:- Brave browser or any on the above browsers when we make the URL of iframe start from https://ws-na to //ws-na
Can anyone help me with its solution?
Thanks

IE not displaying the page within iframe

I am currently trying to place https://phishingquiz.withgoogle.com/ into an iframe.
It works correctly within Chrome, but seems to just say loading when viewing it in IE.
I have included the code below:
<iframe src="https://phishingquiz.withgoogle.com/" allow-same-origin allow-
scripts allow-popups allow-forms allow-pointer-lock width="1200"
height="900">
</iframe>
I am currently running version 11.0.9600.19236
Above is what Chrome displays, which is correct.
Above is what IE displays, which is wrong.
I have tried to using the sandbox attribute to allow-javascript, which i presume it might be coded in that, but still no luck.
Would any one have any ideas?

iOS 8 Embedded YouTube in HTML web app fails

YouTube iOS8 Media Load Issue - Media plays successfully while in Safari, but when the app is loaded from a Home Screen web clip, playing the video fails.
Moreover, tapping a link to navigate away from the page while the media is failing to load results in a complete crash of the app to the Home Screen.
Here is a link that demonstrates this (obviously run on your iDevice). You can run it initially in Safari browser, it'll work fine. Install it as a home screen icon, playing video will fail, and clicking the bottom link will crash the app.
http://nterspace.com/youtubeissue.html
The code that works when the app is loaded up in the Safari browser is:
<iframe width="100%" maxwidth="432" height="270" src="//www.youtube.com/embed/_j4KrMAygJI" frameborder="0" allowfullscreen></iframe>
Anyone have any thoughts? Is this bad embed code?
Today, April 09, 2015. Finally , this issue is partially resolved. After updating to version 8.3 my webapps returned to work again for the dailymotion and vimeo videos. Youtube videos are now redirecting to the native application, which is very annoying.
EDIT:
As the youtube videos was redirecting to the native application , I had to use the youtube url as follows:
<iframe width="100%" height="300" src="https://www.youtube-nocookie.com/embed/hdjL8WXjlGI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
So my users can watch the video without having to leave the webapp.
For some reason the nocookie option does not redirect. Let's hope that this will be completely fixed in the next iOS version.
I am having the same issues!
This is an issue particular to IOS8. Please see: https://discussions.apple.com/thread/6558443 Hopefully Apple will fix this issue soon. Another issue arising is unable to use Play button:
The Play button on a youtube embed does not work on android-chrome
UPDATE: They have fixed the PLAY button ISSUE!
It was still broken on 8.3 for me, but it turned out it was because there was an <input type="search"> element on the page (bizarre). Made a video: https://www.youtube.com/watch?v=rrKxAIXnydE
iOS 8.3 fixes the bug. Videos are now playable from homescreen webapp, including from appcache.
source:
Just tested this on iPad with IOS 8.1.3 - still broken.
sneuf's iframe works for safari pages but not when loaded from home screen (web clip).

SoundCloud HTML5 widget: share panel covers waveform when audio finished

When the audio completes in the HTML5 version of the SoundCloud widget, the share panel appears and covers the audio waveform. The user can replay the audio; however, the share panel doesn't disappear, nor does there seem to be any way for the user to hide it. Nor is there any way to prevent the panel from appearing in the first place, which is the ideal option.
The "sharing" parameter is set to false in my embed code.
Here is the embed code I'm using:
<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F87283114&buying=false&sharing=false&liking=false&show_artwork=false&download=false&show_user=false&show_bpm=false&show_playcount=false&show_comments=false&color=568ED4&theme_color=DDD9C3"></iframe>
Replicated in Firefox and Chrome.
Again, this is an HTML5 issue only. The Flash version works properly.
Note that a similar issue also occurred but was fixed in the Flash version:
New SoundCloud HTML5 widget animation on track finish